要素がどのプロパティを変更する予定かをブラウザに事前通知し、最適化を促すプロパティです。transform、opacity等を指定できますが、過剰な使用はパフォーマンスを悪化させるため注意が必要です。
will-change: auto | <animateable-feature>.animated-element {
will-change: transform, opacity;
}transformとopacityの変更を予告
.hover-effect:hover {
will-change: transform;
transform: scale(1.1);
}ホバー時のアニメーション最適化
/* アニメーション終了後 */
.element {
will-change: auto;
}最適化の解除
使いすぎるとメモリを消費。アニメーション前に設定し、終了後にautoに戻す。
常時設定するとパフォーマンスが悪化する場合がある。
Chrome 36+, Firefox 36+, Safari 9.1+