Reference
- Free forever
- No sign-up
- Instant results
CSS Transition Duration Guide
A reference guide to the right animation duration for every UI interaction type. Get sensible timing ranges and easing curves for hover states, modals, drawers, and more.
| Interaction | Duration | Easing |
|---|---|---|
| Hover state (button, link) | 100–150ms | ease |
| Tooltip / popover appear | 150–200ms | ease |
| Dropdown / menu open | 200–250ms | ease-out-expo |
| Modal / drawer open | 250–350ms | ease-out-back |
| Page transition | 300–500ms | ease |
| Skeleton / loading pulse | 1000–1500ms | infinite |
| Scroll-triggered reveal | 400–600ms | ease-out-expo |
💡 Rule of thumb: anything faster than 100ms feels instant. Anything slower than 500ms feels sluggish. Stay in that window.
When would you use this?
Animation timing is one of those things that separates polished UIs from ones that feel slightly off, even if people can't say why. Too fast and interactions feel jarring. Too slow and everything feels sluggish and over-produced. This guide gives you sensible duration ranges for different interaction types, including hover states, tooltips, modals, and page transitions, along with appropriate easing curves.