CSS Translateによるgpuアクセラレーション移動

GPUアクセラレーション移動

top、left、margin、rightの代わりにCSS translateで要素を移動すると、ブラウザのGPUコンポジターを活用して劇的にスムーズなアニメーションが実現します。

top/leftの問題

/* 遅い：毎フレームでレイアウト+ペイントが発生 */
.element {
  position: absolute;
  transition: left 0.3s, top 0.3s;
}
.element:hover {
  left: 50px;
  top: 30px;
}

translateによる解決

/* 高速：GPUで合成、レイアウト/ペイントなし */
.element {
  transition: transform 0.3s;
}
.element:hover {
  transform: translateX(50px) translateY(30px);
}

レンダリングパイプライン

各アニメーションフレームは以下の段階を経ます：

1. JavaScript — スタイル変更をトリガー
2. Style — 計算済みスタイルを算出
3. Layout — 位置とサイズを計算
4. Paint — レイヤーにピクセルを描画
5. Composite — GPUでレイヤーを合成

transformとopacityはステップ3と4をスキップし、StyleからCompositeに直接進みます。これが60fps対応の理由です。

will-changeヒント

アニメーションする要素に対して、ブラウザにGPUレイヤーの準備を指示できます：

.will-animate {
  will-change: transform;
}

控えめに使用してください。各will-change: transformはGPUメモリを消費する新しいコンポジターレイヤーを作成します。

パフォーマンスの測定

Chrome DevToolsのPerformanceタブで比較してください。top/leftでは毎フレームで緑色の「paint」バーが表示されます。translateでは「composite」作業のみのクリーンなフレームになります。