Animations
モーション用のアニメーションキーフレーム定義
アニメーショントークンは、デザインシステム全体で一貫したモーションパターンを提供します。
持続時間
アニメーションの持続時間を定義するトークン。
| Token | Value | Description |
|---|---|---|
durations.transition.fast | 150ms | |
durations.transition.normal | 200ms | |
durations.transition.slow | 300ms |
イージング
アニメーションのイージング関数を定義するトークン。
| Token | Value | Description |
|---|---|---|
easings.transition | cubic-bezier(0.4, 0, 0.2, 1) | |
easings.transition.enter | cubic-bezier(0, 0, 0.2, 1) | |
easings.transition.exit | cubic-bezier(0.4, 0, 1, 1) | |
easings.transition.emphasized | cubic-bezier(0.05, 0.7, 0.1, 1) |