cssアニメーションがカクつく理由

ハンバーガーメニューにCSSアニメーションを実装する際、なんだか動きがカクカクしていたので色々調べていると以下のような記事を見つけました。

CSSアニメーションについて深く知る

この記事を見ると、

要素を縦横にアニメーションを伴って動かしたい場合、transitionを適用させた要素に対して、「top, right, bottom, left」などのプロパティよりも、「transform: translate(X, Y);」を使用した方が滑らかなアニメーションを実現できる

みたいなことが書いてありました。

今回の記事ではその理由を簡単にまとめてみたいと思います。

transform: translate(X, Y); による移動が優れている理由

これは、「top, right, bottom, left」と「transform: translate(X, Y);」で要素の描画(レンダリング)方法が異なることに起因しています。

CPUとは

「top, right, bottom, left」での移動はCPUで処理されます。

CPUとは、「Center Processing Unit」の略称で、「中央演算処理装置」と呼ばれます。

"中央"とあるように、パソコンの処理の中心を担う、いわば指揮官です。

キーボードやマウスといった周辺装置からのデータを受け取り、コンピュータに計算させたり、記憶したりします。

GPUとは

「transform: translate(X, Y);」での移動はGPUで処理されます。

GPUとは、「Graphics Processing Unit」の略称で、「画像処理装置」と呼ばれます。

CPUの指令で画像処理を行います。

文字情報と違って画像は情報量が多く、膨大な計算が必要です。

なので、専用の処理装置GPUが登場します。

まとめ

まとめると、グラフィック系の処理はCPUよりもGPU側が得意なため、画面描画がスムーズだということみたいです。

これから要素の移動にアニメーションをつけるときはtransform translateを使おうと思いました。

最後までごらんいただきありがとうございました！