Motion
How things move, quickly and only when something changes.
Durations
| Token | Time | Used for |
|---|---|---|
--dur-instant | 80ms | Hover and press color |
--dur-fast | 140ms | Switch, chip, tooltip, closing |
--dur-base | 200ms | Popover, menu, tab underline |
--dur-slow | 280ms | Dialog or sheet opening |
--dur-spin | 900ms | One turn of the spinner |
By job
| Job | Time | What moves |
|---|---|---|
| Enter | --dur-base | A menu, popover or tooltip fades in from --scale-enter, on --ease-out |
| Exit | --dur-fast | It fades out to --scale-enter, on --ease-in |
| Overlay | --dur-slow | A dialog fades and scales in; a sheet slides from its edge |
| Collapse | --dur-base | A panel's height, the one place height moves |
| Press | --dur-instant | Color, and scale to --scale-press |
Tokens
9 tokens
--dur-instant- 80ms
--dur-fast- 140ms
--dur-base- 200ms
--dur-slow- 280ms
--dur-spin- 900ms
--ease-out- cubic-bezier(0.16, 1, 0.3, 1)
--ease-in- cubic-bezier(0.4, 0, 1, 1)
--scale-enter- 0.97
--scale-press- 0.98