Emil Kowalski アニメーション ベストプラクティス

Emil Kowalski の教え、オープンソースライブラリ (Sonner, Vaul)、および彼の animations.dev コースに基づく Web インターフェースの包括的なアニメーション ガイド。7 つのカテゴリにわたる 43 のルールを影響度の高い順に提示します。

適用のタイミング

以下の場合に本ガイドラインを参照してください:

• React コンポーネントにアニメーションを追加する場合
• イージングカーブやタイミング値を選択する場合
• ジェスチャーベースのインタラクション (スワイプ、ドラッグ) を実装する場合
• トースト通知やドロワーコンポーネントを構築する場合
• アニメーションのパフォーマンスを最適化する場合
• アニメーションのアクセシビリティを確保する場合

ルールカテゴリ (優先度順)

優先度	カテゴリ	影響度	プレフィックス
1	イージング選択	CRITICAL	ease-
2	タイミング・デュレーション	CRITICAL	timing-
3	プロパティ選択	HIGH	props-
4	トランスフォーム技法	HIGH	transform-
5	インタラクションパターン	MEDIUM-HIGH	interact-
6	戦略的アニメーション	MEDIUM	strategy-
7	アクセシビリティとポーリッシュ	MEDIUM	polish-

クイックリファレンス

1. イージング選択 (CRITICAL)

• ease-out-default - デフォルトのイージングに ease-out を使用する
• ease-custom-curves - CSS のビルトインではなくカスタム cubic-bezier を使用する
• ease-in-out-onscreen - 画面上の動きに ease-in-out を使用する
• ease-spring-natural - 自然な動きにスプリングアニメーションを使用する
• ease-ios-drawer - ドロワーコンポーネントに iOS スタイルのイージングを使用する
• ease-context-matters - アニメーションのコンテキストに合わせてイージングを選択する

2. タイミング・デュレーション (CRITICAL)

• timing-300ms-max - UI アニメーションは 300ms 以下に留める
• timing-faster-better - 高速アニメーションは認知パフォーマンスを向上させる
• timing-asymmetric - プレスとリリースに非対称タイミングを使用する
• timing-tooltip-delay - 最初のツールチップに遅延を設け、以降は即座に表示する
• timing-drawer-500ms - ドロワーアニメーションには 500ms デュレーションを使用する

3. プロパティ選択 (HIGH)

• props-transform-opacity - transform と opacity のみをアニメーション化する
• props-hardware-accelerated - メインスレッドが混雑している場合はハードウェアアクセラレーション済みアニメーションを使用する
• props-will-change - will-change を使用して 1px のズレを防ぐ
• props-avoid-css-variables - ドラッグアニメーションで CSS 変数を避ける
• props-clip-path-performant - レイアウトフリーな reveals に clip-path を使用する

4. トランスフォーム技法 (HIGH)

• transform-scale-097 - ボタンプレス時に 0.97 にスケールする
• transform-never-scale-zero - scale(0) からアニメーション化しない
• transform-percentage-translate - translateY にはパーセンテージ値を使用する
• transform-origin-aware - アニメーションをオリジン対応にする
• transform-scale-children - スケールトランスフォームは子要素に影響する
• transform-3d-preserve - 3D トランスフォーム効果に preserve-3d を使用する

5. インタラクションパターン (MEDIUM-HIGH)

• interact-interruptible - アニメーションを中断可能にする
• interact-momentum-dismiss - モーメンタムベースのディスミスを使用する
• interact-damping - 境界線でドラッグをダンプする
• interact-scroll-drag-conflict - スクロールとドラッグの競合を解決する
• interact-snap-points - 速度を考慮したスナップポイントを実装する
• interact-friction-upward - 摩擦を伴う上方向ドラッグを許可する
• interact-pointer-capture - ドラッグ操作にポインターキャプチャを使用する

6. 戦略的アニメーション (MEDIUM)

• strategy-keyboard-no-animate - キーボードアクション時のアニメーション化は行わない
• strategy-frequency-matters - アニメーション化の前にインタラクション頻度を考慮する
• strategy-purpose-required - すべてのアニメーションに目的が必要
• strategy-feedback-immediate - すべてのアクションに対して即座にフィードバックを提供する
• strategy-marketing-exception - マーケティングサイトは例外

7. アクセシビリティとポーリッシュ (MEDIUM)

• polish-reduced-motion - prefers-reduced-motion を尊重する
• polish-opacity-fallback - モーション削減時のフォールバックに opacity を使用する
• polish-framer-hook - Framer Motion で useReducedMotion フックを使用する
• polish-dont-remove-all - モーション削減時にすべてのアニメーションを削除しない
• polish-blur-bridge - blur を使用してアニメーション状態をブリッジする
• polish-clip-path-tabs - タブトランジションに clip-path を使用する
• polish-toast-stacking - scale とオフセットを使用してトーススタッキングを実装する
• polish-scroll-reveal - 適切な閾値でスクロールアニメーションをトリガーする
• polish-hover-gap-fill - ホバー可能要素間のギャップを埋める
• polish-stagger-children - 子アニメーションをスタガーして編成する

キー値リファレンス

値	用途
cubic-bezier(0.32, 0.72, 0, 1)	iOS スタイルのドロワー/シートアニメーション
scale(0.97)	ボタンプレスフィードバック
scale(0.95)	最小エンタースケール (scale(0) は使用禁止)
200ms ease-out	標準 UI トランジション
300ms	UI アニメーションの最大デュレーション
500ms	ドロワーアニメーションデュレーション
0.11 px/ms	モーメンタムディスミスの速度閾値
100px	スクロール表示ビューポート閾値
14px	トースススタックオフセット

リファレンスファイル

ファイル	説明
references/_sections.md	カテゴリ定義と順序付け
assets/templates/_template.md	新規ルールのテンプレート
metadata.json	バージョンとリファレンス情報