06
Motion
Duration and easing values for consistent animation timing.
Duration
| Token | Value | Usage | Example |
|---|---|---|---|
| 150ms | Micro-interactions, toggles, tooltips | ||
| 250ms | Standard transitions, hover states | ||
| 400ms | Page transitions, modals, complex animations | ||
| 600ms | Elaborate entrances, staggered lists |
Easing
| Token | Value | Usage | Example |
|---|---|---|---|
| cubic-bezier(0.4, 0, 1, 1) | Elements leaving the screen | ||
| cubic-bezier(0, 0, 0.2, 1) | Elements entering the screen | ||
| cubic-bezier(0.4, 0, 0.2, 1) | Elements moving across screen | ||
| cubic-bezier(0.34, 1.56, 0.64, 1) | Playful, bouncy interactions |