カクカクしないスムーズな動きをするアニメーション

アニメーションを作った時に、「どうも動きがカクカクすることがあるなー」と思っていました。今回、どうやったらスムーズな動きになるのか実験しました。

アニメーションのデモです。更新もしくはReloadボタンを押すと違いがわかりやすいです。

Leftプロパティによる指定

今までleftやrightによる指定でアニメーションを作っていました。例えば、left:0pxからleft:500pxへ移動みたいな感じです。この方法だと動きがカクカクしますね。

TransformプロパティのtranslateX値による指定

今回はじめて試しましたが、動きがスムーズになりましたね。完全にスムーズになってはいませんが、Leftプロパティよりも改善されたと思います。ちなみに、先程の例だと、transform: translateX(0)からtransform: translateX(500px)となります。

まとめ

正直、ローカル環境で作成したときは、両方に違いを感じませんでした。しかし、レンタルーサーバーにアップロードしてインターネットで見ると違いがわかりました。そういうことでいえば、サーバー、ネット環境などの他の要素が大きい可能性はあります。まあ、transform: translateXで指定すれば問題ないでしょう。