CSS · Chapter 33 of 44
CSS Transitions
Transitions animate changes to a CSS property smoothly over time instead of instantly, using transition-property, transition-duration, transition-timing-function, and transition-delay.
They're often triggered by state changes like :hover, giving buttons and UI elements a polished feel.
Syntax
transition: property duration timing-function delay;Transition shorthand
transition: property duration timing-function delay; combines all four settings into one line, e.g. transition: all 0.3s ease;
Common triggers
Transitions usually activate on state changes like :hover, :focus, or a class toggled by JavaScript.
Example 1 (css)
.btn {
background: steelblue;
transition: background 0.3s ease;
}
.btn:hover {
background: darkblue;
}Output
The button's background smoothly fades from steel blue to dark blue over 0.3 seconds on hoverThe transition property animates the background-color change instead of it happening instantly.
Key points
- Transitions animate property changes smoothly over time.
- transition-duration sets how long the animation takes.
- transition-timing-function controls the pacing (ease, linear, etc.).
- Transitions commonly trigger on :hover or class changes.
💡 Note: transition: all can be convenient but may be less performant than specifying exact properties.