Tokens / Motion
Motion
Set the timing and pace of your interface.
Duration
How long a transition takes.
| Token and description | Value | Preview |
|---|---|---|
| 0ms | ||
| 50ms | ||
| 100ms | ||
| 150ms | ||
| 200ms | ||
| 250ms | ||
| 300ms | ||
| 350ms | ||
| 400ms | ||
| 450ms | ||
| 500ms | ||
| 1000ms | ||
| 5000ms |
Easing
How a transition accelerates and settles. Each preview lasts 5 seconds.
| Token and description | Value | Preview |
|---|---|---|
| cubic-bezier(0.25, 0.1, 0.25, 1) | ||
| cubic-bezier(0.42, 0, 1, 1) | ||
| cubic-bezier(0.19, 0.91, 0.38, 1) | ||
| cubic-bezier(0.42, 0, 0.58, 1) | ||
| cubic-bezier(0, 0, 1, 1) |