Animations
一貫したモーションのための持続時間とイージングのトークン
アニメーショントークンは、デザインシステム全体で一貫したモーションパターンを提供します。 各行のプレビューは、トークンの値をそのまま使ってボールを動かしています。
持続時間
トランジションの長さを定義するトークン。プレビューはトークンの持続時間そのままで動くため、行ごとの速さの違いをそのまま比較できます。
| Token | Value | Preview | Description |
|---|---|---|---|
150ms | ホバーやフォーカスなどのマイクロインタラクション | ||
200ms | 標準的なトランジション | ||
300ms | 強調したいアニメーション |
イージング
トランジションの速度カーブを定義するトークン。カーブの違いに集中できるよう、プレビューの長さは 1.5 秒に揃えています。
| Token | Value | Preview | Description |
|---|---|---|---|
cubic-bezier(0.4, 0, 0.2, 1) | ほとんどのトランジションに使う標準イージング | ||
cubic-bezier(0, 0, 0.2, 1) | 要素が現れるときの減速カーブ | ||
cubic-bezier(0.4, 0, 1, 1) | 要素が消えるときの加速カーブ | ||
cubic-bezier(0.05, 0.7, 0.1, 1) | 重要なアクションに使う強調カーブ |