Widely available 全主要ブラウザで対応済み。安心して使用できる。
インタラクション Widely available

will-change

アニメーションやトランジションが行われるプロパティをブラウザに事前に伝え、GPUレイヤーの確保などの最適化を促す。transform や opacity のアニメーション前に指定することでパフォーマンスが向上する。ただし常時指定ではなくアニメーション直前に付与し、終了後に解除するのが理想的。

パフォーマンス最適化

概要

アニメーションやトランジションが行われるプロパティをブラウザに事前に伝え、GPUレイヤーの確保などの最適化を促す。transform や opacity のアニメーション前に指定することでパフォーマンスが向上する。ただし常時指定ではなくアニメーション直前に付与し、終了後に解除するのが理想的。

対応ブラウザ

デスクトップ

Chrome 36+
Edge 79+
Safari 9.1+
Firefox 36+

モバイル

Chrome Android 36+
Safari iOS 9.3+
Firefox Android 36+

基本構文

CSS 
/* ホバー時のアニメーションを最適化 */
.card:hover {
  will-change: transform;
}

.card:active {
  transform: scale(0.98);
}

/* JSで動的に付与・解除 */
.animating {
  will-change: transform, opacity;
}

実務での使いどころ

  • スクロール連動アニメーション

    スクロールに連動して要素を動かすアニメーションのカクつきを軽減する。

注意点

  • will-change を常時指定するとメモリを余分に消費する。必要な時だけ付与し、アニメーション完了後に解除する。
  • 過度に使用するとパフォーマンスが逆に悪化する。本当に必要な要素にのみ使用する。

アクセシビリティ

  • パフォーマンス最適化により、低スペックデバイスでもスムーズなアニメーションを提供できる。

参考リンク