will-changeを使ってアニメーションのカクつきを解消!

will-changeを使ってアニメーションのカクつきを解消!

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を避けたい際に、まず試してみると良いと思います。

まとめ

アニメーションする際の動作の軽減は、端末・ブラウザなどでに影響される事が多々ありますが、
基本的にはスムーズに動くように設定しておきたいですね。

参考サイト

https://developer.mozilla.org/ja/docs/Web/CSS/will-change