The CSS transition-duration property specifies how long an animated property change takes to reach its final value. Set it on the element’s normal rule so transitions run both when a state begins and when it reverses. section 15.1
A button transition
A button can change color and corner shape on hover: `button { transition-property: all; transition-duration: 0.5s; } button:hover { border-radius: 1em; background-color: red; }`. The browser interpolates the changed values over half a second, including the reverse transition when the pointer leaves. section 15.1
Choose the duration according to the effect and keep the value where users will not experience unnecessary delay:
- Use roughly 200–500 milliseconds for most transitions. section 15.3
- Keep hover effects, fades, and small scaling effects below 300 milliseconds; some can be as short as 100 milliseconds. section 15.3
- Allow 300–500 milliseconds for large movements or complex timing functions such as bounces. section 15.3
- Temporarily increase the duration to two or three seconds while inspecting behavior, then restore a shorter production value. section 15.3
- Pair multiple durations with multiple properties when different changes need different speeds, or use the transition shorthand. section 15.1
Listing 15.2 Button styles with a transition
button {
padding: 0.3em 1em;
border: 0;
font-size: 1rem;
color: white;
background-color: oklch(74% 0.11 195deg); #1
transition-property: all; #2
transition-duration: 0.5s; #3
}
button:hover {
border-radius: 1em; #4
background-color: oklch(55% 0.16 24deg); #4
}
Inspect the complete button rule to see transition-duration applied alongside transition-property and a hover state. section 15.1
