Without a transition, a CSS property change (like a hover changing a background color) happens instantly. The transition property makes it animate smoothly over a set duration instead.
.button {
background-color: blue;
transition: background-color 0.3s;
}
.button:hover {
background-color: darkblue;
}| Property | Controls |
|---|---|
| transition-property | Which property animates — or "all" for every property that changes |
| transition-duration | How long the animation takes |
| transition-timing-function | The speed curve — ease, linear, ease-in, ease-out, ease-in-out |
| transition-delay | How long to wait before starting |
.button {
transition-property: background-color, transform;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}All four values in one line, in the same order as the table above.
.button {
transition: background-color 0.3s ease-in-out 0s;
}.card {
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}What actually starts a transition
A transition needs a state change to trigger it — usually :hover, :focus, or a class toggled by JavaScript. Without a trigger, nothing animates.