CSS Transitions in CSS
From the CSS cheat sheet · Transitions · verified Jul 2026
CSS Transitions
Animate property changes smoothly between states
css
.btn {
background: #3b82f6;
transition: background 200ms ease;
}
.btn:hover {
background: #2563eb;
}
/* Shorthand: property duration timing-function delay */
transition: all 300ms ease-in-out;
transition: transform 200ms ease, opacity 200ms ease;💡 Transition individual properties instead of "all" — better performance and control
⚡ Only transition cheap properties: transform, opacity, color, background, box-shadow
📌 Avoid transitioning width/height/top/left — they trigger layout recalculation (janky)
🟢 See the CSS Animations sheet for keyframes, complex sequences, and timing deep-dives
transitionhoveranimation