

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

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

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

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


CC BY-SA 4.0
2021-05-12T02:05:36.590
75794
2021-05-16T21:12:38.663
2021-05-16T21:12:38.663
19110
45208
question
javascript css
JavaScriptとCSSのアニメーションはどちらが速い？


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

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


CC BY-SA 4.0
2021-05-16T12:54:08.687
75874
2021-05-16T12:54:08.687
3475
75794
answer