Edited at

CSSアニメーションを(出来るだけ)軽くする

More than 5 years have passed since last update.

translate3d等コンポジションレイヤー上で動作するプロパティ(いわゆるGPUレンダリング用のレイヤーに配置される)を使っても、

上記を適用した要素がページ内に大量にある場合などはモバイル環境で結構ガタつくケースがある。

そんな時の応急処置をメモ。


  1. 出来るだけposition: relativeを使用しない

    position: relativeによるレイヤー生成がコンポジションレイヤーとバッティング?してるイメージなのか、デバッガーでコンポジションレイヤーを表示して確認するとアニメと関係ない要素(position: relativeが使用されているレイヤー)までレイヤー上に配置(描画)されるのでposition: relativeを出来るだけ使用しないほうがいいみたい。


  2. 組み方的にposition: relativeを取れない場合

    z-indexを指定してあげる。


  3. いやz-indexも指定してるけど。。。

    -webkit-backface-visibility: hiddenや-webkit-transform: translate3d(0,0,0)等のハックを親要素などにも使う。


  4. 場合によってはCSS3アニメにこだわらずJSでアニメ、もしくはスプライトシート等の選択肢も考える

    発想の転換も必要。ケースバイケース。



参考リンク

http://havelog.ayumusato.com/develop/performance/e556-compositing_border_and_layer.html