will-change

その他

要素がどのプロパティを変更する予定かをブラウザに事前通知し、最適化を促すプロパティです。

構文

Syntax

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+