CSSのwill-changeプロパティとは？
特定のCSS処理（特にtransitionやanimation）を実行している際に、ブラウザで「ちらつき」や「ガタつき」を経験したことがあるかもしれません。CSSのwill-changeプロパティは、ブラウザに要素の予想される変更を知らせる役割を果たします。
このプロパティを使用すると、ブラウザは要素のスタイル変更が実際に必要になる前に必要なリソースを事前に最適化し、スタイルの変更やレンダリングをより高速かつ効率的に処理できます。これにより、「ちらつき」や「ガタつき」といった視覚的な現象を軽減または解消し、ウェブページの表示をより滑らかにします。結果として、ウェブサイトのスタイルパフォーマンス向上に貢献します。
CSSの処理における「ちらつき」と「ガタつき」現象およびCPU・GPU・ハードウェアアクセラレーションの関係を理解する
#「ちらつき」と「ガタつき」現象
CSSの処理中に要素が滑らかに変化せず、急激な変化によってブラウザ画面がちらついたりガタついたりする現象を指します。これはユーザー体験を損なう視覚的な問題です。#CPU（Central Processing Unit）
コンピュータの中央処理装置（CPU）であり、CSS処理においてはスタイルの計算、レイアウトの処理、アニメーションフレームの計算などを担当します。CPUが過剰に使用されたり最適化されていない場合、「ちらつき」や「ガタつき」といった視覚的な現象が発生することがあります。#GPU（Graphics Processing Unit）
グラフィック処理に特化した装置であり、CSSの変形やアニメーションのグラフィック部分を担当します。GPUは並列処理によって大量のグラフィック処理を行えるため、ブラウザで滑らかなアニメーションやグラフィック効果を実現する上で重要な役割を果たします。GPUの性能が不足したり制限された場合、「ちらつき」や「ガタつき」といった現象が発生することがあります。will-changeプロパティ
will-changeプロパティは、開発者が要素にどのような変更が予想されるかをレンダリングのヒントとしてユーザーエージェント（ブラウザ）に提供します。これにより、ユーザーエージェントは該当する変更をスムーズにレンダリングするために必要な最適化処理を事前に実行でき、開発者が機能を変更またはアニメーション化する際の「ジャンク（jank）」を回避できます。形式構文
selector {
will-change: /* value */
}