【CSS】CSSアニメーションをGPUで快適に処理する方法

アニメーションを多用した魅力的なウェブサイトでは、CSSアニメーションが頻繁に使われます。
しかし正しく実装しないとパフォーマンスの低下を招くことも。

アニメーションが「カクカク」する場合、たいていGPUでなくCPUで処理されていて、リペイントが発生している可能性があります。
こんなときはGPUアクセラレーションを利用することで、よりなめらかで快適な動作を実現することができます。

GPUアクセラレーションとは？: 通常の演算処理を行うCPUではなく、グラフィック処理に特化したGPU（Graphics Processing Unit）を利用して、特定の操作（アニメーションや動画再生、3Dレンダリングなど）を高速化する技術です。CPUの負担を軽減し、滑らかな表示が可能になります。
リペイント: ブラウザが特定箇所を再描画すること。
たとえばCSSで色や背景が変わると、その要素はリペイントが発生します。リペイントはPCに負荷がかかり、パフォーマンスの低下やカクつきの原因になるため、GPUアクセラレーションを使ったテクニックが推奨されています。

というわけで。
今日はCSSの「will-change」プロパティを使ってGPUアクセラレーションを行う方法を紹介します。

GPUを使うための「will-change」プロパティ

「will-change」プロパティを使用することで、ブラウザに対して変化するプロパティを事前に予告して伝え、GPU処理を最適化します。

例1（transformを予告する場合）：

.example {
	will-change: transform;
	transition: transform 1s linear;
}

例2（opacityを予告する場合）：

.example:hover {
	 will-change: opacity;
	 opacity: 0.5;
}

「will-change」を使用すると、GPUによりなめらかにアニメーション処理されやすくなります。

will-changeを多用するとレイヤーを過剰に作成することになるため、逆にパフォーマンスの低下を招きます。

また、will-changeを使用する場合、なるべくアニメーションの直前に付与するようにしてください。will-changeを恒久的に定義した場合、不要なGPUメモリを専有することになります。

*:hover {
	will-change: all;
}

すべての要素にwill-changeを指定することは厳禁です。

また、過去、CSSハック的に「transform3d」を使ってGPUアクセラレーションを促す方法も流行りましたが、「will-change」のほうが信頼性が高く、パフォーマンスの最適化にも適しています。

基本的にはCSSに1行を書き加えるだけなのでとても簡単です。
ぜひお試しください。