Transitions
Transition tokens specify standardized movement related values. They provide a shared language for motion, ensuring consistency and predictability.
Duration
Duration defines how long an animation takes. Consistent values create clear hierarchy and pacing, from short micro-interactions to longer full-screen transitions. Use duration to make motion feel smooth and appropriate for each context.
| Preview | Token | Value | Description |
|---|---|---|---|
| duration/instant | 0ms | Immediate response with no visible animation. | |
| duration/xxs | 70ms | Very short micro-transitions or immediate interactions, such as a button color change. | |
| duration/xs | 150ms | Used in small interactions, such as hover effects. | |
| duration/s | 250ms | Suitable for general transitions, such as card flips or button press feedback. | |
| duration/m | 450ms | A good choice for medium-length transitions, such as opening a modal window. | |
| duration/l | 750ms | For large or full-screen transitions. | |
| duration/xl | 1000ms | Used in longer animations that should feel calm and unhurried. | |
| duration/xxl | 2000ms | Very long animations, such as large loading animations or massive full-screen transitions. |
Delay
Delay defines when an animation starts relative to a user action or another animation. Use it for rhythm and sequencing when multiple elements appear in order. Apply sparingly — delays can reduce responsiveness, so use only when they clearly improve clarity or visual continuity.
| Preview | Token | Value | Description |
|---|---|---|---|
| delay/xxs | 70ms | Very short delay. | |
| delay/xs | 150ms | Short delay for transitions. | |
| delay/s | 250ms | Small delays in transitions. | |
| delay/m | 450ms | Medium delays. | |
| delay/l | 750ms | Larger delays, for example in modal presentations. | |
| delay/xl | 1000ms | Long delays in complex animations. | |
| delay/xxl | 2000ms | Very long delays in special cases. | |
| delay/instant | 0ms | No delay. |
Easing
Easing controls how motion accelerates and decelerates, affecting the rhythm and feel of transitions. Different curves — decelerate, accelerate, bounce — support different goals such as guiding attention, emphasizing feedback, or creating expressive moments.
| Preview | Token | Value | Description |
|---|---|---|---|
| easing/dec | cubic-bezier(0.17, 0.84, 0.44, 1.0) | Used for motions where a smooth stop is desired, for example in element entrances. | |
| easing/acc | cubic-bezier(0.84, 0.17, 1, 0.44) | Suitable for motions that start softly and end quickly, such as element exits. | |
| easing/default | cubic-bezier(0.65, 0.05, 0.35, 1.0) | Base easing for natural animations. | |
| easing/exp | cubic-bezier(0.75, 0, 0.17, 1.0) | Suitable for emphasized interactions where the motion should feel more lively and dynamic. | |
| easing/bounce-sm | cubic-bezier(0.6, 0.0, 0.1, 1.3) | A small bounce that adds playfulness or attention-grabbing motion to elements. | |
| easing/bounce-lg | cubic-bezier(0.6, 0.0, 0.1, 3) | A larger bounce used especially in visually important moments, but with moderation. | |
| easing/linear | cubic-bezier(0, 0, 1, 1) | Used for motions where constant speed is required, such as opacity or color changes. |
Motion patterns
Read more on how to utilise these tokens in the motion language principles page.