Transition
A CSS property that animates the change between two property values over a defined duration.
Plain English
Transitions are what make interfaces feel alive rather than mechanical. When a button changes colour on hover, a transition makes that change gradual instead of jarring. A 150ms ease transition on a hover colour change is nearly invisible yet completely transforms how the UI feels — removing it makes interactions feel cheap and abrupt. The rule of thumb: transitioning everything at once (transition: all) is lazy and often causes unexpected animations; be specific about what you want to animate.
Technical
The transition shorthand: property duration easing-function delay. Separate multiple transitions with commas. GPU-accelerated properties (transform, opacity, filter) should always be preferred for transitions — they do not trigger layout recalculation. Avoid transitioning: width, height, top, left, margin, padding — these trigger layout and are expensive. Common easings: ease (slow-fast-slow), ease-in-out (smooth both ends), ease-out (fast start, gradual stop — best for UI), linear (mechanical, good for spinners).
Live Demo
Hover each card to feel the difference.
No transition
0ms
Jarring, mechanical
Too slow
600ms
Sluggish, frustrating
150ms ease-out
150ms
Natural, snappy
150ms ease-out is the standard for hover micro-interactions. Never use transition: all.
Usage
✓ Good usage
Add transition: background-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out to interactive cards — fast enough to feel instant, slow enough to feel smooth.
✗ Bad usage
transition: all 0.5s ease on every element — slow animations make the UI feel sluggish, and "all" transitions unexpected properties like width changes.
Recommended values
- Hover colour change: 150ms ease-out
- Card hover (shadow + transform): 200ms ease-out
- Dropdown open: 150ms ease-out (fade + translate)
- Modal open: 200ms ease-out
- Page transition: 300ms ease-in-out
- Never use transition: all — be specific
Common mistakes
- transition: all — causes unexpected animations when other properties change.
- Transitions longer than 300ms on micro-interactions — feels sluggish.
- Transitioning layout properties (width, height) — causes performance issues.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add transition: background-color 150ms ease-out, box-shadow 200ms ease-out, transform 150ms ease-out, color 150ms ease-out to all interactive elements. Never use transition: all. Respect prefers-reduced-motion by disabling transitions for users who request it.