Tokens · Animation
Animation
8 段階の duration トークンと 4 種類の easing カーブ。スウォッチをクリックすると動きを確認できます。
Durations
目安：マイクロインタラクション（hover / focus）は duration-150。 状態遷移（modal / drawer）は duration-200 〜 duration-300。 演出的な瞬間（ヒーローのインク、ページ遷移）は duration-500 以上。
Easings
ease-linearlinear等速。スピナーや進捗不明のプログレスに。
ease-incubic-bezier(0.4, 0, 1, 1)立ち上がりは遅く、終わりが速い。画面から去る要素に。
ease-outcubic-bezier(0, 0, 0.2, 1)立ち上がりは速く、ふわっと着地。エントランスのデフォルト。
ease-in-outcubic-bezier(0.4, 0, 0.2, 1)両端ソフト。画面に残ったまま遷移する状態変化に。