Tokens
Motion
Durations and easing curves. Press play to compare.
Duration
| Preview | Token | Value | Use |
|---|---|---|---|
| duration/fast | 150ms | duration-(--duration-fast) | |
| duration/base | 200ms | duration-(--duration-base) | |
| duration/slow | 300ms | duration-(--duration-slow) |
Easing
| Preview | Token | Value | Use |
|---|---|---|---|
| easing/standardfrom tokens/globals.css | cubic-bezier(0.4, 0, 0.2, 1) | ease-standard | |
| easing/outfrom tokens/globals.css | cubic-bezier(0.22, 1, 0.36, 1) | ease-out |
With reduced motion turned on in the operating system, these demos jump instead of moving. Components do the same.