emilkowal-animations

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

Emil Kowalski の教え、オープンソースライブラリ（Sonner、Vaul）、および彼のanimations.devコースに基づく、Web インターフェース向けの包括的なアニメーションガイドです。影響度の高い順に優先順位付けされた、8 カテゴリにわたる 58 のルールを掲載しています。

適用する場面

次のような場合に、これらのガイドラインを参考にしてください。

• React コンポーネントにアニメーションを追加するとき
• イージングカーブやタイミング値を選ぶとき
• ジェスチャーベースのインタラクション（スワイプ、ドラッグ）を実装するとき
• トースト通知やドロワーコンポーネントを構築するとき
• アニメーションのパフォーマンスを最適化するとき
• アニメーションのアクセシビリティを確保するとき
• 上記のいずれかを Tailwind CSS v4 のユーティリティ（tw- カテゴリを参照）で表現するとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	イージングの選択	CRITICAL	ease-
2	タイミングと継続時間	CRITICAL	timing-
3	プロパティの選択	HIGH	props-
4	トランスフォームの手法	HIGH	transform-
5	インタラクションパターン	MEDIUM-HIGH	interact-
6	戦略的なアニメーション	MEDIUM	strategy-
7	アクセシビリティと仕上げ	MEDIUM	polish-
8	Tailwind v4 ユーティリティ	MEDIUM	tw-

クイックリファレンス

1. イージングの選択（CRITICAL）

• ease-out-default - デフォルトのイージングには ease-out を使う
• ease-custom-curves - 組み込みの CSS よりカスタムの cubic-bezier を使う
• ease-in-out-onscreen - 画面上の動きには ease-in-out を使う
• ease-spring-natural - 自然な動きにはスプリングアニメーションを使う
• ease-spring-config - 継続時間とバウンスを指定してスプリングを設定する
• ease-ios-drawer - ドロワーコンポーネントには iOS スタイルのイージングを使う
• ease-context-matters - アニメーションのコンテキストに合わせてイージングを選ぶ

2. タイミングと継続時間（CRITICAL）

• timing-300ms-max - UI アニメーションは 300ms 未満にする
• timing-faster-better - アニメーションを速くすると、体感上のパフォーマンスが向上する
• timing-asymmetric - 押下時とリリース時では非対称なタイミングを使う
• timing-tooltip-delay - 最初のツールチップには遅延を設け、2 回目以降は即時表示する
• timing-drawer-500ms - ドロワーアニメーションには 500ms の継続時間を使う

3. プロパティの選択（HIGH）

• props-transform-opacity - transform と opacity のみをアニメーションさせる
• props-hardware-accelerated - メインスレッドがビジー状態のときは、ハードウェアアクセラレーションを使ったアニメーションを利用する
• props-will-change - 1px のずれを防ぐために will-change を使う
• props-avoid-css-variables - ドラッグアニメーションでは CSS 変数を避ける
• props-clip-path-performant - レイアウトを伴わない表示には 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 を使う
• transform-starting-style - @starting-style で表示時の状態をアニメーションさせる

5. インタラクションパターン（中〜高）

• interact-interruptible - アニメーションを中断可能にする
• interact-momentum-dismiss - 慣性に基づく解除を使用する
• interact-damping - 境界でドラッグに減衰をかける
• interact-scroll-drag-conflict - スクロールとドラッグの競合を解決する
• interact-snap-points - 速度を考慮したスナップポイントを実装する
• interact-friction-upward - 摩擦を加えて上方向へのドラッグを可能にする
• interact-pointer-capture - ドラッグ操作にポインターキャプチャを使用する
• interact-multitouch - ドラッグ中の追加のタッチポイントを無視する
• interact-touch-hover - ポインターメディアクエリを条件にホバーアニメーションを有効にする

6. 戦略的なアニメーション（中）

• strategy-keyboard-no-animate - キーボードから開始された操作はアニメーションさせない
• strategy-frequency-matters - アニメーションの前にインタラクションの頻度を考慮する
• strategy-purpose-required - すべてのアニメーションに目的を持たせる
• strategy-feedback-immediate - すべての操作に即座にフィードバックを提供する
• strategy-marketing-exception - マーケティングサイトは例外とする
• strategy-cohesion - 動きをコンポーネントの個性に合わせる
• strategy-review-fresh-eyes - アニメーションをスローモーションと翌日に見直す

7. アクセシビリティと仕上げ（中）

• polish-reduced-motion - prefers-reduced-motion を尊重する
• polish-opacity-fallback - モーション低減時の代替手段として opacity を使用する
• polish-framer-hook - Framer Motion で useReducedMotion フックを使用する
• polish-dont-remove-all - モーション低減時も穏やかなアニメーションを維持する
• polish-blur-bridge - アニメーション状態の切り替えにぼかしを使用する
• polish-clip-path-tabs - タブの切り替えに clip-path を使用する
• polish-toast-stacking - スケールとオフセットを使ってトーストのスタック表示を実装する
• polish-scroll-reveal - 適切なしきい値でスクロールアニメーションを開始する
• polish-hover-gap-fill - ホバー可能な要素間の隙間を埋める
• polish-stagger-children - 演出のために子要素のアニメーションをずらして開始する

8. Tailwind v4 のユーティリティ（中級）

上記の原則を適切な Tailwind CSS v4 のユーティリティで表現します。Tailwind v4 プロジェクトにのみ適用されます。上記の生の CSS と Framer Motion のルールが引き続き正となります。

• tw-ease-duration-defaults - ease-out と 300ms 未満の duration を明示的に設定します
• tw-custom-easing-theme - カスタムのイージング曲線を @theme トークンとして登録します
• tw-press-scale - ボタンの押下フィードバックに active:scale-[0.97] を使用します
• tw-asymmetric-timing - active:duration を使って押下時とリリース時のタイミングを分けます
• tw-starting-enter - starting: バリアントで表示状態へのアニメーションを行います
• tw-reduced-motion - motion-safe / motion-reduce を使って動きを制御します
• tw-origin-aware - origin-* ユーティリティで transform-origin を設定します
• tw-will-change - アクティブなジェスチャー中にのみ will-change-transform を適用します

主な値のリファレンス

値	用途
cubic-bezier(0.23, 1, 0.32, 1)	UI 操作に使う強い ease-out
cubic-bezier(0.77, 0, 0.175, 1)	画面上の動きに使う強い ease-in-out
cubic-bezier(0.32, 0.72, 0, 1)	iOS スタイルのドロワー／シートアニメーション
scale(0.97)	ボタンの押下フィードバック
scale(0.95)	表示時の最小スケール（scale(0) は使用しません）
200ms ease-out	標準的な UI トランジション
300ms	UI アニメーションの最大 duration
500ms	ドロワーアニメーションの duration
0.11 px/ms	慣性による閉じる操作の速度しきい値
100px	スクロールに応じて表示する際のビューポートしきい値
14px	トーストスタックのオフセット

要素別の duration

要素が表示される頻度と、どれだけ動くかに基づいて duration を選びます。UI アニメーションは 300ms 未満にします。

要素	duration
ボタンの押下フィードバック	100–160ms
ツールチップ、小さなポップオーバー	125–200ms
ドロップダウン、選択メニュー	150–250ms
モーダル、ドロワー	200–500ms
マーケティング／説明用	さらに長くてもかまいません

リファレンスファイル

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