css-animation-creator

CSS アニメーションクリエイター

CSS、Tailwind、Framer Motion を使って、プロダクション品質でアクセシブル、かつ GPU 効率に優れた Web UI のモーションを作成します。

ワークフロー

1. モーションの目的（フィードバック、楽しさ、ガイダンス、ストーリーテリング）を特定します。
2. 手法を選びます。状態変化には CSS トランジション、ループや複数段階のモーションにはキーフレーム、オーケストレーションやスクロール連動エフェクトには Framer Motion または JS を使用します。
3. インタラクションに合わせてタイミングとイージングを設定します。references/principles-and-timing.md のタイミング表とイージング表を適用します。
4. アニメーションを作成します。一から書くのではなく、以下の参照ファイルからすぐに使えるキーフレームやパターンを取り入れます。
5. GPU アクセラレーションのため、アニメーション対象のプロパティを transform と opacity に限定します。references/performance.md を適用します。
6. すべてのアニメーションで、視覚効果を抑える設定を尊重します。references/accessibility.md を適用します。
7. リリース前にローエンドデバイスで確認し、レイアウトの頻繁な再計算がないことを確認します。

内容

• references/principles-and-timing.md — ディズニーの 12 原則の UI への適用、時間とイージングの表。
• references/transitions.md — トランジションの構文、イージング関数、cubic-bezier プリセット、Tailwind トランジション。
• references/keyframe-library.md — キーフレームの構文、フェード、拡大縮小、バウンス、回転、スライド、注目を集めるキーフレーム。
• references/loading-animations.md — スピナー、ドット、スケルトンローダー、シマー、プログレスバー。
• references/micro-interactions.md — ボタン、ホバー、アイコン、フォーム、成功・エラー時のインタラクション。
• references/page-transitions.md — View Transitions API、Framer Motion のページ遷移と共有レイアウト遷移、段階的に表示するリスト。
• references/scroll-animations.md — Intersection Observer、Framer Motion のスクロールフック、ネイティブ CSS のスクロール駆動アニメーション。
• references/accessibility.md — prefers-reduced-motion CSS、Tailwind の motion-safe/reduce、React フック。
• references/tailwind-config.md — すぐに使える tailwind.config.js のアニメーションおよびキーフレーム定義。
• references/performance.md — GPU アクセラレーション対応プロパティ、will-change、contain、パフォーマンスチェックリスト。