Animation Design

Animation & Design Expert Skill

概要

このスキルは、Webアニメーション設計の専門家スキルです。

---

1. アニメーション設計の4原則

原則1: transform + opacity のみアニメーション（最重要）

/* ✅ GPU合成レイヤーで処理 → コマ落ちなし */
.good {
  transition:
    transform 0.55s,
    opacity 0.55s;
}

/* ❌ レイアウト再計算が発生 → パフォーマンス悪化 */
.bad {
  transition:
    width 0.55s,
    height 0.55s,
    margin 0.55s;
}

理由: transform と opacity のみがGPU合成レイヤーで処理される。width, height, top, left, margin, padding などはレイアウト再計算を引き起こす。

原則2: カスタム cubic-bezier で自然な動き