How to create high-performance CSS animations | Articles | web.dev

This guide teaches you how to create high-performance CSS animations. See Why are some animations slow? to learn the theory behind these recommendations. Browser compatibility All of the CSS properties that this guide recommends have good cross-browser support. transform opacity will-change Move an element To move an element, use the translate or rotation keyword values of the transform property.

[wyumikokh]

[performance]

[kjirouu]

ブラウザ描画プロセスの簡単な説明。レイアウトの再計算を発生させるCSSプロパティ一覧。など

[TokyoIncidents]

アニメーションの話この辺も参考になる #fxdevcon

[o_hiroyuki]

animation

[ooyabuh]

“要素のtransformを変えることは、つまるところ位置、回転、縮尺を変えることです。多くの場合、positionはleftとtopプロパティが設定されることでアニメーションが発生します。この問題は上に示したように、leftもtopも再レ

[trapple]

CPU負荷の多いアニメーション方法と少ないアニメーション方法の話

[ginpei]

アニメーションをぬるぬる動かすために必要な知識。翻訳に参加したよ。