複数のdivをアニメーション化する最適な方法

Question

私は、複数のdivを画面にアニメーション表示する最適な方法を探しています。私はjQueryを試しましたが、画面上に5以上の要素があるとスキップし始めました。 Raphael.jsは私に同じ問題を与えました。では、一度に画面上に5-6個のdivをアニメーション表示するにはどうすればよいでしょうか？彼らは画面上を水平に動いているだけです。

CSS3のtranslate2dはこれに適していますか？ translate3dを代わりに使用することで、パフォーマンスを大幅に最適化できる場所を読んでいます。それは私の場合に当てはまりますか？

Answer 1

ターゲットブラウザでCSS3がサポートされている場合は、translate2dを使用してよりスムーズなアニメーションを実現できます。あなたが一緒にすべての項目をアニメーション化する必要がある場合（つまり、アニメーションのルールは、それらのそれぞれのために同じ）で、あなただけの

.animTarget{animation:translate3d(100, 0, 0)} 

クラスを作成し、あなたのjavascriptのコードにすることができ、言う：

$("animation-target-selector").addClass('animTarget') 

を

私はこのようなものをアニメーション化するような何かやってよりも簡単であることを発見した：それは、それぞれのstyle属性とすべてのDOM要素に追加しますので

$("animation-target-selector").css('animation', 'translate3d(100, 100, 0)'); 

を。