PackagesUIToken Reference
Motion
モーショントークンのリファレンス。
アニメーションはフィードバックと状態遷移の認知のために使う。300msを超えるアニメーションは原則使わない。
Duration
| Tailwind | 値 | 用途 |
|---|---|---|
duration-75 | 75ms | hover時の色変化、focus ring |
duration-150 | 150ms | ボタンpress、トグル |
duration-200 | 200ms | ドロップダウン展開、フェードイン |
duration-300 | 300ms | モーダルの出現、Toast |
Easing
| Tailwind | 用途 |
|---|---|
ease-out | 要素の出現。速く現れて、ゆっくり定位置に収まる |
ease-in | 要素の退出。ゆっくり動き出し、速く消える |
ease-in-out | 画面内での移動・変形。自然な加速と減速 |
パターン一覧
| パターン | Tailwind | 用途 |
|---|---|---|
| 色変化 | transition-colors duration-75 ease-in-out | hover、focus の背景色・ボーダー色変化 |
| トグル | transition duration-150 ease-in-out | チェックボックス、スイッチの切り替え |
| フェードイン | transition-opacity duration-200 ease-out | ドロップダウン、ポップオーバーの出現 |
| フェードアウト | transition-opacity duration-150 ease-in | ドロップダウン、ポップオーバーの退出 |
| モーダル出現 | transition-opacity duration-300 ease-out | モーダル、ダイアログの表示 |