← Back to properties
CSS Property
transition
AnimationAnimates property changes smoothly over a specified duration.
Syntax
transition: property duration timing-function delay;
Example
transition: all 0.3s ease;
Common use cases
- Hover effects on buttons and links
- Smooth color and opacity changes
- Animated show/hide interactions
Practical developer insight
Avoid transition: all in production — it can trigger unnecessary repaints. Target specific properties like color or transform instead.