transition
The transition shorthand animates property changes smoothly over a duration with an easing curve.
Syntax
transition: <property> <duration> <timing> <delay>;
Examples
.btn {
transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn:active { transform: scale(0.97); }
Output
The button smoothly animates its color and slightly shrinks when pressed.
Notes
Animate cheap properties (transform, opacity) for smooth 60fps results; avoid transitioning layout properties. List multiple comma-separated transitions. Respect prefers-reduced-motion. transition-behavior:allow-discrete enables animating display.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 26 |
| firefox | 16 |
| safari | 9.0 |
| edge | 12 |