will-changeとは、アニメーションするプロパティーの指定することで、
ブラウザ側で事前にアニメーションの準備を行い、その要素がアニメーションを行う際に最適な状態にします。
多用は非推奨ですので、主にアニメーションがカクついてスムーズに動かない際に適応するよ良いと思います。
目次
記述例
.target{
transition: transform 1s, opacity 1s;
will-change: transform, opacity;
}
will-changeを多用するとレイヤーを過剰に作成することになるため、逆にパフォーマンスの低下を招いてしまいますので、
KVやメインとなる部分での使用が良いと思います
注意点
・ブラウザ側で可能な限りすべての最適化を行っているので、多くの要素に適用しすぎない。
・will-changeはなるべくアニメーションの直前につける。
・ページの更新速度目的での使用はさける。
補足
transform設定
transform: translate3d(0,0,0);
transform: translateZ(0);
backface-visibility: hidden;
上記設定を行う事で、CSSアニメーションにGPU処理が取り入れられるようになり、アニメーションがスムーズになるケースがありますので、
will-changeを避けたい際に、まず試してみると良いと思います。
まとめ
アニメーションする際の動作の軽減は、端末・ブラウザなどでに影響される事が多々ありますが、
基本的にはスムーズに動くように設定しておきたいですね。
