CSS - will-change

• トップ
• CSSリファレンス
• will-change

概要

説明

要素がもう少しでアニメーションや変化を始めるであろうことをブラウザに伝えます。これを受けてブラウザは、アニメーション処理を GPU に送るためのレイヤ作成処理を行うなどの事前準備を行います。事前準備を行うことでアニメーションが滑らかに動くこともありますが、多用しすぎるとメモリやリソースを食いつぶして悪化することもあるため、使用には十分な注意が必要です。

JavaScript でアニメーションが始まる少し前にこのプロパティを設定し、アニメーションが終わると auto に戻すことが推奨されています。ただし、この処理も迂闊に行うと悪化することもあるようです。下記のサイトで詳しく説明されています。

• will-changeで目指す60fpsのぬるぬるCSSアニメーション (by @yuneco さん)

値

auto

規定値。ブラウザのデフォルトの挙動にまかせます。auto 以外の値はカンマ(,)で複数記述することができます。

scroll-position

もうすぐ要素のスクロール位置に関するアニメーションや変化が起こることを示します。

contents

もうすぐ要素のコンテンツにアニメーションか変化や起こることを示します。

<css-property>

transform や opacity などのCSSプロパティ名を指定します。もうすぐ要素に対して指定したCSSプロパティに関するアニメーションや変化が起こることを示します。

使用例

function onAnimationWillStartSoon(el) {
  el.style.willChange = "transform, opacity";
}
function onAnimationEnded(el) {
  el.style.wiiChange = "auto";
}