JavaScriptとCSSのアニメーションはどちらが速い？


例えば横移動のアニメーションをする際、どちらが速いのでしょうか？

  * transitionプロパティを使ったアニメーション
  * requestAnimationFrameでtransform:translate3D等を動かしたアニメーション

速さ = FPS が良い方を知りたいです。

例えばスペックの悪いデバイス等でも、  
FPSが高いのはどちらなのかなという疑問からの  
質問でした。




CSS transition と `requestAnimationFrame()`
の双方とも、ハードウェアのリフレッシュレートに従って描画が更新されます。よって、CPUが十分に速ければどちらでもFPSは同じになります。

CPUが遅かったりアニメーション処理や他の処理が重いとき、`requestAnimationFrame()`
のほうがFPSが落ちやすくなります。ブラウザのネイティブコードとJavaScriptの世界を橋渡しするためのオーバヘッドが常に存在するからです。

