CSSのwill-changeで将来の変化をブラウザに通知し、最適化する方法をわかりやすく解説

2024.09.15
スポンサーリンク

will-changeプロパティは、ブラウザに対して「この要素の特定のプロパティが将来的に変化する可能性がある」ことを事前に通知し、描画パフォーマンスを最適化するためのプロパティです。

スポンサーリンク

will-changeプロパティの値とその効果の一覧

  • transform: 要素の変形が予測される場合に使用します。例えば、ホバー時にスケールや回転などのアニメーションを行う際に使われます。
  • opacity: 要素の透明度が変わる場合に使用します。特に、フェードイン・フェードアウトのアニメーションをスムーズに行う際に適しています。

注意点や関連情報

will-changeプロパティは、要素が将来変化することをブラウザに通知し、最適化を促すために使用されます。パフォーマンスを向上させる反面、使用しすぎるとメモリ消費が増加し、かえってパフォーマンス低下を招くことがあります。そのため、必要な要素にのみ限定して使うことが推奨されます。

will-changeが効かない時の原因と対策

will-changeを指定したプロパティに変化が発生していない

will-changeは、指定したプロパティが変化することをブラウザに事前に伝えてパフォーマンスを最適化します。しかし、will-changeで指定したプロパティが実際に変化しない場合、ブラウザの最適化が無意味となり、効果が発揮されません。

対策: will-changeで指定したプロパティが実際に変化するか確認します。

共通するCSSコード

.css-sample-container {
    border: 1px solid #333;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

will-change: transform

要素が変形（スケール、回転など）する場合に使用します。will-change: transformを設定すると、ブラウザが変形を事前に予測し、最適なパフォーマンスでアニメーションを実行します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-will-change-transform">
        ホバーで変形します。
    </div>
</div>

CSSコード

.css-sample-will-change-transform {
    width: 300px;
    height: 200px;
    background-color: lightblue;
    transition: transform 0.5s ease;
    will-change: transform;
}

.css-sample-will-change-transform:hover {
    transform: scale(1.2);
}

ホバーで変形します。

will-change: opacity

要素の透明度が変わる場合に使用します。will-change: opacityを設定すると、フェードイン・フェードアウトのアニメーションがスムーズに行われます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-will-change-opacity">
        ホバーで透明度が変わります。
    </div>
</div>

CSSコード

.css-sample-will-change-opacity {
    width: 300px;
    height: 200px;
    background-color: lightgreen;
    transition: opacity 0.5s ease;
    will-change: opacity;
}

.css-sample-will-change-opacity:hover {
    opacity: 0.5;
}

ホバーで透明度が変わります。

まとめ

  • will-changeプロパティは、将来のプロパティ変化を予測し、ブラウザに最適化を促すために使用されます。
  • 必要以上に使うとメモリ消費が増え、パフォーマンスが低下する可能性があるため、注意が必要です。
  • 特にアニメーションで使用するプロパティ（transform、opacity）に対して効果的です。
スポンサーリンク