Duration
トランジションやアニメーションの長さを統一し、インターフェース全体で一貫した速度感を実現します。
Duration Scale
瞬時からゆっくりまで、7段階のアニメーション時間
duration-instant0ms即座の変更、遷移なし
ホバーして確認
duration-fast100msホバー、フォーカス
ホバーして確認
duration-micro150msボタン、マイクロインタラクション
ホバーして確認
duration-normal200ms標準的なUI遷移（デフォルト）
ホバーして確認
duration-slow300msモーダル、ドロワーの開閉
ホバーして確認
duration-slower400ms複雑なアニメーション
ホバーして確認
duration-slowest500msページ遷移、大きな要素の変化
ホバーして確認
duration-spin1000msローディングスピナー（infinite）
ホバーして確認
Component Demo
実際のUIコンポーネントでの速度体感
Button Hover
150msduration-micro
Dropdown
200msOption 1
Option 2
duration-normal
Modal
300msduration-slow
Interactive Demo
各ボックスは異なる速度で移動します。
100ms150ms200ms300ms400ms500ms1000msUse Cases
各UIパターンに適したアニメーション時間
ホバーエフェクト100ms
duration-fastリンク、アイコンのホバー時の色変化
ボタン150ms
duration-microボタンのホバー、アクティブ状態の遷移
ドロップダウン200ms
duration-normalメニューの展開・折りたたみ
モーダル200ms / 100ms
duration-normal / fastモーダルの出現（normal）と退出（fast）アニメーション
ページ遷移500ms
duration-slowestページ間のフェード遷移
| パターン | 推奨値 | 説明 |
|---|---|---|
| ホバーエフェクト | duration-fast(100ms) | リンク、アイコンのホバー時の色変化 |
| ボタン | duration-micro(150ms) | ボタンのホバー、アクティブ状態の遷移 |
| ドロップダウン | duration-normal(200ms) | メニューの展開・折りたたみ |
| モーダル | duration-normal / fast(200ms / 100ms) | モーダルの出現（normal）と退出（fast）アニメーション |
| ページ遷移 | duration-slowest(500ms) | ページ間のフェード遷移 |
Best Practices
✓
推奨
- ✓小さな要素には短い時間（100-200ms）
- ✓大きな要素には長い時間（300-500ms）
- ✓ユーザーの待ち時間を最小化
- ✓アクセシビリティ設定を尊重
✕
避けるべき
- ✗500ms以上の長いアニメーション
- ✗頻繁なインタラクションでの遅い遷移
- ✗一貫性のない速度の混在
- ✗不必要なアニメーション