よくできたアニメーション、つまり、スタート時にはもたもたせずにすぐ始まり、ヌルヌル動く（60fpsを維持する）アニメーションにするための、いくつかの技術的な方策が提案されています。
再レイアウトをともなわないCSSプロパティを使用する
transformプロパティを使用する。たとえば要素の右への移動アニメーションを行う場合には、再レイアウトをともなうleftでなく、transform:translateX()を使用する。
カラーアニメーションには再レイアウトはともなわないので、移動アニメーションではなく、colorやopacityを使ったカラーのアニメーションを検討する。
position:abusolute;を適用する
移動アニメーションの場合、他の要素への影響を抑えることができる。
translateZ(0)、translate3d(0, 0, 0)を記述しておく
移動アニメーションの場合、要素に適用するCSSクラスにtranslateZ(0)、translate3d(0, 0, 0)を記述しておくと、要素は自動的にブラウザのGPUレイヤーに送られる。GPUレイヤーでは物事が高速に処理されるので、描画も速くなる。ただし使い過ぎは逆効果。
transformとopacityプロパティの処理は、ブラウザのコンポジターと呼ばれる、レイヤーを合成する部分で行われます。
will-changeプロパティの使用を検討する
will-changeプロパティは、前もって要素をGPUレイヤーで扱うようにする働きを持つ。まだW3C草案段階ではあるが、新しいブラウザでの実装は進んでいる。
JavaScriptでなく、CSSアニメーションを使用する(一長一短がある)
JavaScriptを使用すると、非常に自由にアニメーションが作成できるが、その命令はメインスレッド（コンピュータの命令が実行される１本の大通り）で実行されるので、そこが混雑したとき、アニメーションはかくかくする。
これに対し、CSSのアニメーションはブラウザネイティブの機能なので、アニメーションは初めから最適化されて実行され、かくかくすることはない。しかし、あらかじめ予定されているタイプのアニメーションなので、JavaScriptのような自由でダイナミックな表現力に欠ける
JavaScriptのWeb Workerの使用を検討する
Web WorkerはJavaScriptをメインスレッドでない、舞台裏で実行する、新しい技術。しかし実装はそう簡単ではない。
新しいWeb Animations APIの使用を検討する
Web Animations APIはJavaScriptとCSS両方の良さをミックスした新しい方法で、現在、ChromeとFirefoxブラウザで実装されている。
用途によってJavaScriptとCSSアニメーションを使い分ける
- 単純で自己完結するアニメーションにはCSSを使用する。
- 細かく制御する場合には、JavaScriptを使用する。
- アニメーションシーン全体を調整する場合には、requestAnimationFrame()を使用する。
- jQueryのanimate()やGreenSockのTweenMaxなど、JavaScriptライブラリのアニメーション機能を利用する。
- CSSとJavaScriptの長所を合わせ持つWeb Animations APIを使用する。