[css]will-changeを複数指定する方法

カンマ区切りで追加できる。

記述方法
活用シーン
参考

記述方法

div{
    filter: grayscale(100%);
    transition: transform 0.5s ease,filter 0.5s ease;
    will-change: filter,transform;
}
div:hover{
    filter: grayscale(0);
    transform: scale(1.1,1.1);
}

序文の通り、「,」で区切ると複数指定が可能になる。

活用シーン

例えば:hoverとかで画像を拡大する際になんかボケてるな、とか、動いてることは動いてるんだけどなんか妙な感じがした時にwill-changeで指定しておくといい感じになったりする。

内容としては予め動作を指定してるからきっちり処理しろよって感じの。一般的に付与するであろうCSSの効果で「ん？」ってなったらとりあえず使ってみるといい。これでダメなら違うところが何かなってる可能性を疑う。

そんなに便利なら何でもかんでもwill-changeにぶっこめばいいじゃん、って話になる。*:hoverとかで予め思いつく限りをぶち込めば都度書かなくていいじゃん、ってのは誰でも思いつくことで。でもこれはブラウザに負荷がかかる内容らしく、クラッシュするかもよってリスクがあったり。必要に駆られる場面こそ限られてるんで、要所要所で使うに留めたほうが無難。というか正攻法だろうなという感じ。

参考

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

はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・ア…