CSSのtransformやanimationでアニメーションを実装したとき、画面がチラついたりカクついたりしたことはないでしょうか？これはCPUにソフトウェア上でアニメーション処理や描写処理（レンダリング）を任せていることで起きる問題です。

これを回避するために、描写に特化したGPUというハードウェアにアニメーション処理や描写処理を行わせることで、ハイパフォーマンスかつ滑らかな描写を実現することが可能です。これをハードウェア・アクセラレーションといいます。

will-changeプロパティを使う

CSSのwill-changeプロパティを使うと、指定した要素がGPU（ハードウェア・アクセラレーション）処理用のレイヤーと定義づけされ、描写のパフォーマンスが向上します。

例えば、transformプロパティに対して有効化するとtransformの変化の処理がハードウェア・アクセラレーションで行われます。

.element{
 will-change: transform;
}

透明度やフィルタ処理なども同じく指定が可能です。複数のプロパティをカンマ区切りで指定することができます。もちろん横幅や高さ、ポジション指定など様々なプロパティを指定可能です。

.element{
 will-change: opacity,filter;
}

動きのある要素はwill-changeを指定して滑らかかつ、ハイパフォーマンスなアニメーション実装を実現しましょう。

その他の方法

現時点では考える必要は余りありませんが、一部の古いブラウザではwill-changeをサポートしていない場合があります。そういう場合でも以下の書き方で要素に対してハードウェア・アクセラレーションを行うことが可能です。

.element{
 transform: translateZ(0);
}

• 対象ブラウザ：“will-change” | Can I use

でも、will-changeプロパティは多用厳禁！

will-changeプロパティはアニメーションの最適化を行ってくれる分、マシンのメモリを消費します。ページ内の一部要素だけGPU処理用のレイヤーにする程度であればもん問題ありませんが、全体や複数の要素を指定するとメモリを消費し、かえってパフォーマンスの低下を招いたり、表示が荒れたりブラウザを巻き込む不具合が起きやすくなります。

will-changeプロパティは、アニメーションをする要素と動きのあるプロパティを制限して使用しましょう。

以下は良い例

.element1{
 will-change: transform,opacity;
}

.element2{
 will-change: animation;
}

以下は悪い例。全称セレクタですべての要素を対象としたり、プロパティ値でallを指定するとすべてのプロパティが対象となり、大量のメモリを消費します。

*{
 will-change: all;
}

また、アニメーション処理が終わったらwill-changeプロパティを削除することで、GPU処理用のレイヤーの対象から外れ、メモリから開放されます。will-changeプロパティに対し、auto値を指定することで解除できます。

.element{
 will-change: auto;
}

will-changeは限られた要素と、限られたプロパティに対して最小限に使うよう心がけましょう。

おしまい♥