page-transitions とは?
Web アプリケーションやモバイル アプリケーションでルートの変更、ビューの遷移、モーダルの開閉、ナビゲーション アニメーションを実装するときに使用します。 ソース: dylantarre/animation-principles。
Web アプリケーションやモバイル アプリケーションでルートの変更、ビューの遷移、モーダルの開閉、ナビゲーション アニメーションを実装するときに使用します。
コマンドラインで page-transitions AI スキルを開発環境にすばやくインストール
ソース: dylantarre/animation-principles。
Apply Disney's 12 animation principles to route changes, view transitions, and navigation patterns.
| Squash & Stretch | Entering page elastic effect | | Anticipation | Exit animation before enter | | Staging | Hero elements bridge views | | Straight Ahead / Pose to Pose | Shared element vs crossfade | | Follow Through / Overlapping | Content settles after nav | | Slow In / Slow Out | Asymmetric enter/exit easing | | Arc | Slide transitions with curve |
| Secondary Action | Background, nav state changes | | Timing | 200-500ms total transition | | Exaggeration | Reserved for emphasis moments | | Solid Drawing | Consistent spatial model | | Appeal | Smooth, oriented navigation |
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/dylantarre/animation-principles --skill page-transitionsWeb アプリケーションやモバイル アプリケーションでルートの変更、ビューの遷移、モーダルの開閉、ナビゲーション アニメーションを実装するときに使用します。 ソース: dylantarre/animation-principles。
ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/dylantarre/animation-principles