Definition
CSS mechanisms to smooth property changes between different states over a specified duration.
Why It Matters
Transitions provide intuitive feedback without the overhead of complex animations or external libraries.
Core Concepts
- Transitions:
transition: property duration timing-function delayon state change (e.g.,:hover). - Animatable Properties: Color, opacity, and transform transitions are cheap; width/height transitions can trigger expensive layout recalculations.
.button {
background-color: blue;
transition: background-color 0.3s ease-in;
}
.button:hover {
background-color: red;
}