トランジションは、ボタンをホバーした時やローディングアニメーションなど、要素変化の前後関係を明確にする際に使用します。
操作や状態の変化を自然に伝えるため、過度に主張する動きにならないよう配慮し、以下のトークンを使い分けます。
Duration tokens
時間の長さを定義したトークンです。
Name
Value
duration-fast
150ms
最も短い時間でユーザーが迅速な処理を望むようなケースで利用
duration-neutral
300ms
中間の時間で汎用的に利用
duration-slow
600ms
最も長い時間で大きなオブジェクトに変化を及ぼす時などに利用
使用箇所：ナビゲーションなどスクロール時に追従する要素の表示・非表示
使用箇所：アコーディオン開閉、ボタンのホバー
使用箇所：カルーセル画像のフェードイン
Easing tokens
速度変化の度合いを定義したトークンです。
Name
Value
ease-out
ease-out
応答が早く徐々に減速し、余韻を残したい時に利用
linear
linear
等速のため、繰り返されるアニメーションなどで利用
使用箇所：ボタンのホバー
検索する
使用箇所：ローディング、プログレス表現
Composite Token
ホバーではDuration tokenとEasing tokenを組み合わせて使用します。このトークンが直接適用できない場合も、以下の値を使用してください。
Name
Property
Transition
hover-opacity
opacity
value: opacity-60
duration: duration-neutral
easing: ease-out
hover-background-color
background-color
duration: duration-neutral
easing: ease-out
使用箇所：ボタンのホバー
検索する
使用箇所：ボタンのホバー
キャンセル