ウェブサイトでアニメーションを実装する際にはCSSをメインに使われることも多いですが、スムーズに動かなかったり、アニメーション中の表示がおかしくなるというケースはないでしょうか。今回はそんな時に使えるCSSのwill-changeプロパティについて知っておきたいと思います。普段聞きなれないプロパティですがCSSのアニメーションを行う際にはとても重要になりますので覚えておきたいですね。  

will-changeプロパティの役割と注意点

will-changeプロパティは、要素がどのように変化するかを事前にブラウザに伝えるという役割があります。こうすることでブラウザのレンダリング処理を高速化できるようになります。will-changeプロパティを使うことで、アニメーションを使って要素の状態を変化させるときにブラウザが最適なパフォーマンスを発揮できるということになります。   指定する値については、実際は変化の対象となるプロパティを使うことになります。下記のようにプロパティ名を指定します。カンマで区切ることで複数のプロパティを指定できます。

.example {
  will-change: transform, opacity;
}

  このときに注意したいのは、will-changeプロパティはあくまで最終手段として局所的に使うことが重要ということです。例えば下記のように全ての要素に対して、不必要にたくさんのプロパティを対象とするような指定をしてしまうと、逆にブラウザへの負荷が大きくなり、パフォーマンスが下がってしまう場合があります。

* {
  will-change: transform, opacity, animation;
}

  ですので、必要最低限かつ局所的に使うことが重要です。あるいはJavaScriptでアニメーションが適用されない場合には初期値であるautoに戻しておく処理を用意しておくなども重要になります。

const target = document.querySelector('.example');
target.addEventListener('mouseenter', function() => {
  this.style.willChange = 'animation';
});
target.addEventListener('animationEnd', function() => {
  this.style.willChange = 'auto';
});

  CSSアニメーションで要素を動かしたり表示非表示を切り替えたりしている場面で、どうも動きがカクついたり、遅延が発生するなどの場合には一度試してみると改善が期待できるのではないでしょうか。ただし多用には注意しておきたいですね。  

表示不具合への対処例

will-changeプロパティですが、CSSアニメーションのパフォーマンス向上以外にも、アニメーション時の表示不具合にも効果的な場合があります。例えば、CSSのfilter効果やopacityなど複数の描画表現を加えた要素にアニメーションを実行させた場合、Safariでは下記のように、アニメーション実行中に表示不具合が発生しているのが確認できます。また動きも少しカクついている印象もありますね。   そこで、対象となる要素に下記のようにwill-changeプロパティを設定します。

will-change: opacity, filter;

  改めて確認してみると、このようにイメージ通りにアニメーション中の表示が実現できました。アニメーション実行中の表示不具合で原因がよくわからない場合には一度試してみる価値はありますね。  

旧ブラウザへの対応

will-changeプロパティですがIE11では使えないので、旧ブラウザなども対象とする場合には対応が必要となります。実はwill-changeプロパティが登場するまでは、下記のようなハックが使われていたようです。

transform: translate3d(0, 0, 0);
// あるいは
transform: translateZ(0);

  現在は基本的にwill-changeプロパティが使われることがほとんどですが、もし複雑なアニメーション処理を行っているサイトを旧ブラウザにも対応させるなどの場合には覚えておきたいですね。  

---

  今回はCSSアニメーションに使うwill-changeプロパティについてまとめてみました。CSSアニメーションのパフォーマンス向上や、アニメーション実行時の表示不具合が発生するときなどには使える手法だと思いますので、ぜひ試してみてはいかがでしょうか。   （参考にさせて頂いたサイト） CSS will-changeプロパティについて知っておくべきこと