Transitions
define standardized animation values for the design system. They provide a shared language for motion, ensuring consistency and predictability across digital services.
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.