12-principles-of-animation
✓ディズニーの 12 のアニメーション原則を Web インターフェイスに適用します。モーションの実装、アニメーションの品質のレビュー、マイクロインタラクションの設計、または UI を生き生きとさせるときに使用します。 CSS アニメーション、トランジション、モーション ライブラリ、イージング カーブ、スプリング、または UX フィードバックを含むタスクをトリガーします。
SKILL.md
Disney animators codified these principles in the 1930s to make drawings feel real. We use them to make pixels feel human. The problems are surprisingly similar.
| 1 | Squash and Stretch | Convey weight and elasticity in morphing elements | | 2 | Anticipation | Prepare users for what comes next (wind-up before action) | | 3 | Staging | Direct attention through sequential animation | | 4 | Straight Ahead & Pose to Pose | Define keyframes, let browser interpolate |
| 5 | Follow Through & Overlapping | Use springs for organic overshoot-and-settle | | 6 | Slow In & Slow Out | Apply easing curves for natural acceleration | | 7 | Arcs | Add curved paths for organic movement | | 8 | Secondary Action | Reinforce primary actions with subtle flourishes | | 9 | Timing | Keep interactions under 300ms, be consistent |
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill 12-principles-of-animation- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
12-principles-of-animation とは？
ディズニーの 12 のアニメーション原則を Web インターフェイスに適用します。モーションの実装、アニメーションの品質のレビュー、マイクロインタラクションの設計、または UI を生き生きとさせるときに使用します。 CSS アニメーション、トランジション、モーション ライブラリ、イージング カーブ、スプリング、または UX フィードバックを含むタスクをトリガーします。 ソース: raphaelsalaja/userinterface-wiki。
12-principles-of-animation のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill 12-principles-of-animation インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/raphaelsalaja/userinterface-wiki
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-01