パフォーマンス：変形可能なプロパティと再描画されるプロパティ

ブラウザーは3段階でレンダリングします。レイアウト（サイズと位置）→ ペイント（ピクセル）→ コンポジット（GPUレイヤーの合成）です。より前の段階を引き起こすプロパティをアニメーションさせると、処理コストが高くなります。

これらのプロパティを変更すると、ブラウザーはページ全体に及ぶ可能性のあるレイアウトの再計算を強制されます。アニメーションさせないでください。

• width、height
• margin、padding
• top、left
• font-size
• display

これらはレイアウトを省略しますが、ピクセルを再ペイントします。処理コストは中程度です。

• background-color
• color
• box-shadow
• border

これらはレイアウトとペイントの両方を省略します。ブラウザーはラスタライズ済みのレイヤーを合成するだけで済みます。非常に低コストで、GPUアクセラレーションが適用されます。

• transform
• opacity

滑らかな60fpsのアニメーションを実現するには、transformとopacityだけをアニメーションさせてください。top/leftの代わりにtransform: translate()を使い、displayを使ったフェードの代わりにopacityを使います。

will-changeは、アニメーションの開始前に要素を専用のGPUレイヤーへ昇格するようブラウザーに伝えます。これにより、アニメーション中に発生する「昇格フラッシュ」を防げます。

アニメーションが完了したら、will-change: autoを設定するか、プロパティ自体を完全に削除してください。あまりに多くの要素を昇格したままにすると、GPUメモリを無駄に消費します。

Chrome DevToolsのPerformanceタブを使って、フレームのタイミングを記録・調査してください。Renderingタブではペイントフラッシング（緑色のオーバーレイ）を有効にでき、各フレームでどの要素が再ペイントされているかを確認できます。

最も効果の大きい最適化は、位置のアニメーションをtransformに置き換えることです。

背景色のトランジションは再ペイントを引き起こしますが、レイアウトは引き起こしません。小さな要素であれば問題ありません。大きな背景の場合は、代わりにopacityのトランジションを使う疑似要素の利用を検討してください。

containプロパティは、要素とそのサブツリーが独立していることをブラウザーに示します。これによりレイアウトの無効化範囲が制限され、再ペイントのパフォーマンスが向上します。

レイアウトやペイントを引き起こさず、コンポジット段階でアニメーションできるCSSプロパティはどの2つですか。

レイアウトプロパティ（width、top、margin）をアニメーションさせると、コストの高い再計算が発生します。ペイントプロパティ（color、background）はそれより低コストです。transformとopacityだけが、レイアウトやペイントを引き起こさずにGPUのコンポジット段階でアニメーションします。滑らかで高パフォーマンスなアニメーションには、常にこれらを優先してください。