要素がどのプロパティを変更する予定かをブラウザに事前通知し、最適化を促すプロパティです。transform、opacity等を指定できますが、過剰な使用はパフォーマンスを悪化させるため注意が必要です。
will-change: auto | <animateable-feature>| will-change-transform | will-change: transform |
| will-change-auto | will-change: auto |
任意値: will-change-[top,left]
.animated-element {
will-change: transform, opacity;
}transformとopacityの変更を予告
.hover-effect:hover {
will-change: transform;
transform: scale(1.1);
}ホバー時のアニメーション最適化
/* アニメーション終了後 */
.element {
will-change: auto;
}最適化の解除
使いすぎるとメモリを消費。アニメーション前に設定し、終了後にautoに戻す。
常時設定するとパフォーマンスが悪化する場合がある。
AIは「アニメーションを滑らかに」という要望でwill-changeを無差別に振りかけがちですが、常時付与はメモリを浪費し逆効果です。原則は「問題が実測されたときに、アニメ直前に付けて終わったら外す」。多くの場合はtransform/opacityベースのアニメに直す方が先決です。
このwill-changeだらけのCSSを監査して、本当に必要な箇所だけに整理して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。