Transitions
Animate property changes smoothly over time.
Syntax
transition: property duration timing-function;A transition smoothly animates a property when its value changes, for example on :hover.
Set which property to animate, how long it takes, and an easing curve.
Example
Loading editor…
Press Run to see the result.
When to use it
- A designer adds transition: background-color 0.2s ease to a button so its hover color change feels smooth rather than jarring.
- A developer transitions max-height from 0 to a value on an accordion panel to create a smooth expand/collapse animation.
- A developer uses transition: opacity 0.3s on a dropdown menu so it fades in instead of appearing abruptly.
More examples
Button color transition on hover
Animates the background color from blue to dark blue over 200ms when the button is hovered.
.btn {
background-color: #2965f1;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn:hover {
background-color: #1a4fbf;
}Multi-property transition
Transitions both transform and box-shadow simultaneously to create a smooth card lift effect on hover.
.card {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}Fade-in menu with transition
Fades in a dropdown using opacity transition while toggling visibility so it's also keyboard-accessible.
.dropdown {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s;
}
.nav-item:hover .dropdown {
opacity: 1;
visibility: visible;
}
Discussion