Easing
Why ease-in feels broken and ease-out feels right
An easing curve maps time to progress. Linear means constant speed. A steep-then-flat curve means fast start, gentle landing.
Why ease-in feels wrong
Never use ease-in for entrances.
Ease-in starts slow and accelerates. The first 100-200ms show almost no movement after a click.
The three named curves
Enter (ease-out)
Elements appearing. Tooltips, popovers, dropdowns, modals.
Move (ease-in-out)
Elements changing position. Tab indicator sliding. Sidebar resizing. List reordering.
Exit (ease-in)
Elements leaving. The only valid use of ease-in.
Custom curves vs. browser defaults
| Keyword | cubic-bezier | Use case |
|---|---|---|
linear | (0, 0, 1, 1) | Colour fades, opacity changes, progress bars |
ease | (0.25, 0.1, 0.25, 1) | Generic default, rarely optimal |
ease-in | (0.42, 0, 1, 1) | Exits only |
ease-out | (0, 0, 0.58, 1) | Entrances |
ease-in-out | (0.42, 0, 0.58, 1) | Symmetric moves |
The built-in curves are conservative. Use keywords for prototyping, replace with explicit cubic-bezier values before shipping.
Vercel uses cubic-bezier(0.22, 1, 0.36, 1) for popovers. Tailwind UI uses cubic-bezier(0, 0, 0.2, 1) for entries.
When to skip easing entirely
opacity, color, and background-color changes work best with linear. Progress bars with easing look dishonest.
Easing for spatial motion. Linear for non-spatial changes.