TokensMotion
Motion
Tunable. The five-step duration scale and four named easings are the only valid motion vocabulary.
Motion vocabulary
Five durations, four easings. Reach for duration-fast ease-out for micro-interactions, duration-normal ease-spring for layout reveals, and duration-slow ease-overshoot for confidence-builder moments.
Tunable tokens
9 tokens--duration-fast- Light
- 100ms
--duration-instant- Light
- 0ms
--duration-normal- Light
- 200ms
--duration-slow- Light
- 300ms
--duration-slower- Light
- 500ms
--ease-in-out- Light
- cubic-bezier(0.65, 0, 0.35, 1)
--ease-out- Light
- cubic-bezier(0.16, 1, 0.3, 1)
--ease-overshoot- Light
- cubic-bezier(0.68, -0.55, 0.265, 1.55)
--ease-spring- Light
- cubic-bezier(0.34, 1.56, 0.64, 1)