【CSS Modules】will-changeプロパティの使い方

will-changeプロパティは、要素に対して今後何らかの変更、例えばアニメーションやトランジションが適用される予定があることを、ブラウザに事前に伝えるためのプロパティです。このプロパティを使用することで、ブラウザはその変更が実際に発生する前に、描画パフォーマンスを最適化するための準備を行うことができます。具体的には、要素を新しいレイヤーに移動させたり、GPUへ転送したりするなど、スムーズなアニメーションを実現するための前処理を実行します。

これにより、特に複雑なアニメーションや高いフレームレートが求められる場面で、カクつき（ジャンク）を減らし、より滑らかなユーザー体験を提供することが期待できます。指定できる値には、auto（デフォルトで最適化は行われません）、scroll-position（スクロール位置の変更を最適化）、contents（要素の内容の変更を最適化）、そしてtransformやopacityなどのCSSプロパティ名を直接指定する方法があります。複数のプロパティ名を指定する場合はカンマで区切ります。

ただし、will-changeプロパティは注意して使用する必要があります。ブラウザは最適化のために追加のリソースを消費するため、不必要に多く指定したり、長期間適用し続けたりすると、かえってパフォーマンスを低下させたり、メモリ使用量やバッテリー消費を増加させたりする可能性があります。そのため、アニメーションやトランジションが開始されるごく短い時間だけ適用し、完了したら速やかに削除することが推奨されるベストプラクティスです。これはJavaScriptと組み合わせて、動的にクラスを追加・削除するなどの方法で実現できます。

Copy
1will-change: transform, opacity;

引数なし

引数はありません

戻り値なし

戻り値はありません