will-changeプロパティを知った

あけましておめでとうございます。今年もがんばるぞい!な感じです。よろしくお願いいたします。

先日「スマホで使えるオサレなドロワーないかなー」と調べたときに見つけたslideout.jsというものを見つけて導入。

その際にcssをいじっていて「will-change?見慣れないプロパティあるのん」と調べてみた。

will-changeとは

ざっくりいうとCSSアニメーションの最適化を行うためのプロパティ。

opacityとかanimate, translateとかあるわけですが、これらは当然CPUでの処理に向いてません。これらの発生タイミングを明示することで(対応できれば)GPUに処理を回して高速なレンダリングができる…といった趣旨みたいです。

使い方

例えば「要素がクリックされてアクティブになったときにtransformする」CSS。

.ele{
  transition: transform 1s ease-out;
}
.ele:hover{
  will-change: transform;
}
.ele:active{
  transform: rotateY(180deg);
}

大事なのはactiveになる前にhoverが発生する点。

will-changeプロパティはアニメーションが発生する前に予告して最適化を行うため、active時の動作にセットで設定しても意味がないどころか、無駄なリソースを食います。

また、使い終わったらwill-changeプロパティは削除されるのが好ましいです。リソースは解放しましょう

だから本当はスタイルシートに直接記述するのではなく、jsで管理するものらしいです。(もちろん状況による、常にアニメーションの発生が予期される場合とか)

ざっくり書きましたが、そもそも動きのあるサイトを大して作ってない私にはあまり関係ないような。

参考サイト

CSS will-changeプロパティについて知っておくべきこと