Motion
Motion is short and calm. It confirms an action or shows where something came from, and it steps aside when the reader asks for less motion.
How to use motion
- Pick a duration for what the motion does, and an easing for how big it is.
-
When the reader has asked for reduced motion, every duration role becomes
0.01ms. Components get this for free, since they use the roles. -
The value is
0.01msand not0, so that scripts waiting for the end of a transition still get thetransitionendevent. -
A loop, such as a spinner, does not stop by itself when its duration gets shorter. It only spins faster. A
component with a loop turns it off with
animation: noneunder reduced motion.
Durations
| Token | Value | Reduced motion | Use |
|---|---|---|---|
--duration-feedback
|
200ms duration.200 | 0.01ms | Quick feedback on an action: hover, press and focus on buttons, form fields, cards and tags. |
--duration-transition
|
400ms duration.400 | 0.01ms | A change between states, such as a menu panel opening and closing, or an underline changing. |
--duration-emphasis
|
800ms duration.800 | 0.01ms | Longer motion that should be noticed, such as the lines of the menu button and the links fading in in the mobile menu. |
--duration-stagger
|
100ms duration.100 | 0.01ms | The step between items that appear one after another, such as the links in the mobile menu. Use it for about eight items at most, or the wait gets too long. |
Easing
Both curves start fast and slow down at the end, so an element seems to settle into place. The graphs show progress from the start (bottom left) to the end (top right).
| Curve | Token | Value | Use |
|---|---|---|---|
--easing-standard
|
cubic-bezier(0.2, 0.2, 0.2, 1)
easing.out-medium
|
Everyday transitions: hover, color, border, shadow and underline. | |
--easing-smooth
|
cubic-bezier(0.1, 0.2, 0, 1)
easing.out-strong
|
Larger movements that slow down for longer at the end, such as the menu panel and the lines of the menu button. |
Primitives
Raw values that the roles point to. The name of a duration is its value in milliseconds, except
--duration-reduced, which is the value for reduced motion. Use a role instead of these.
| Token | Value |
|---|---|
--duration-100
|
100ms
|
--duration-200
|
200ms
|
--duration-400
|
400ms
|
--duration-800
|
800ms
|
--duration-reduced
|
0.01ms
|
--easing-out-medium
|
cubic-bezier(0.2, 0.2, 0.2, 1)
|
--easing-out-strong
|
cubic-bezier(0.1, 0.2, 0, 1)
|