Durations
Motion duration tokens for transitions and animations.
Duration tokens set how long transitions and animations run — from a fastest micro-interaction to the slowest deliberate, dramatic move. Pairing the right duration with an easing keeps motion feeling responsive rather than sluggish.
Hover anywhere in this panel to play each duration.
fastest
50ms
faster
100ms
fast
150ms
normal
200ms
slow
300ms
slower
400ms
slowest
500ms
| Token | Value | Description |
|---|---|---|
| fastest | 50ms | Fastest speed for instant feedback and micro-interactions |
| faster | 100ms | Faster speed for quick transitions and hover effects |
| fast | 150ms | Fast speed for snappy transitions on interactive elements |
| normal | 200ms | Normal (default) speed for standard transitions and animations |
| slow | 300ms | Slow speed for more noticeable transitions and emphasis |
| slower | 400ms | Slower speed for deliberate transitions and prominent animations |
| slowest | 500ms | Slowest speed for very deliberate transitions and dramatic effects |