transition-property specifies which changing CSS properties animate instead of switching immediately. The value all includes every property that changes, while a comma-separated list limits the transition to named properties. section 15.1
Animating a button
A button begins teal with square corners and, on hover, becomes red with rounded corners. Applying the transition to button rather than button:hover lets the animation run both into and out of the hover state. 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, including transition-property: all and its paired duration. section 15.1
Use the property with these practical distinctions:
- Choose all for broadly animating changed properties, or name properties such as border-radius and background-color for tighter control. section 15.1
- Expect transitions after state changes such as :hover and after JavaScript adds or removes a class affecting styles. section 15.1
