universal-patterns

汎用アニメーションパターン

Disneyの12の原則を、あらゆるアニメーションの基本設定として適用します。

基本のタイミングスケール

カテゴリ	期間	用途
即時	100-150ms	ホバー、切り替え、マイクロ状態
高速	150-250ms	フィードバック、小さなトランジション
標準	250-400ms	モーダル、表示、状態変化
低速	400-600ms	ページトランジション、シーケンス
意図的	600-1000ms	ドラマチックな表示、お祝い

汎用イージングライブラリ

:root {
  /* Standard easings */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);        /* Entrances */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);         /* Exits */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);   /* State changes */

  /* Spring easings */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Overshoot */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Playful */
}

12の原則クイックリファレンス

1. スクワッシュ＆ストレッチ：有機的な印象にするため、スケールを0.95-1.05の範囲にします
2. 予備動作：動作の前に2-3px逆方向へ動かすか、50ms停止します
3. 演出：ユーザーの注意を促す方向にアニメーションさせ、明確な視覚的階層を作ります
4. ストレート・アヘッドとポーズ・トゥ・ポーズ：キーフレームを定義し、状態を計画します
5. 後続動作：2-5%行き過ぎてから、元の位置に落ち着かせます
6. スローイン／スローアウト：常にイージングを使い、リニアにはしません（スピナーを除く）
7. アーク：X軸とY軸の動きを組み合わせ、自然な軌跡にします
8. 副次動作：プロパティを最大2-3個重ねます（不透明度＋トランスフォーム＋シャドウ）
9. タイミング：距離や重要度に合わせて期間を調整します
10. 誇張：UIでは控えめにします（偏差は10%未満）
11. 立体感のある描画：動作中も視覚的な一貫性を保ちます
12. 魅力：動きは演出過剰ではなく、ユーザーの役に立つものにします

基本のアニメーションクラス

/* Standard entrance */
.animate-in {
  animation: fade-in 250ms var(--ease-out) forwards;
}

/* Standard exit */
.animate-out {
  animation: fade-out 200ms var(--ease-in) forwards;
}

/* State transition */
.animate-state {
  transition: all 200ms var(--ease-in-out);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

汎用ルール

1. 応答時間は100ms以内：ユーザーの操作から100ms以内に、目に見える変化を発生させる必要があります
2. UIでは400ms未満：機能的なアニメーションは400msを超えないようにします
3. モーションの軽減：常にprefers-reduced-motionの代替手段を用意します
4. GPUプロパティ：滑らかな60fpsを実現するため、transformとopacityのみを使用します
5. 終了は開始より短く：終了アニメーションは開始アニメーションより20-30%速くします

アクセシビリティの既定値

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

判断フロー

1. 要素が表示されるところですか？ → ease-outを使い、200-300msにします
2. 要素が非表示になるところですか？ → ease-inを使い、150-250msにします
3. 要素の状態が変化するところですか？ → ease-in-outを使い、150-250msにします
4. 継続的な動作ですか？ → linear（回転）またはease-in-out（パルス）を使います
5. ジェスチャーへの応答ですか？ → オーバーシュートを伴うease-outを使い、200ms未満にします

判断に迷った場合は、まず250ms cubic-bezier(0.4, 0, 0.2, 1)を使います。