Transition-property

CSS course · Intermediate · Lesson 59/98

Learn which property transitions with transition-property.

transition-property

transition-property picks which CSS property will transition. Write transition-property: background-color and only the background color shifts smoothly; other properties still jump instantly.

Naming the target property explicitly avoids unwanted animations. If you want only the color to flow but width also animates, the layout can break.

Multiple properties and all

You can transition several properties by separating them with commas: transition-property: color, background-color. Both shift smoothly on hover, in the order you wrote them.

To cover every transitionable property, use the all keyword. transition-property: all makes every property transition. It is handy but watch out for unwanted properties animating along.

Link color transition

Menu links should turn dark red on hover. With transition-property: color only the text color transitions; underline, margins and other properties still jump instantly.

This selective approach shows the user which change matters. Color flows; layout stays. The effect is simple yet clearly felt.

Exercise Add a color transition to the link

Add transition-property: color to the .link rule so only the text color transitions. Then set color: darkred for .link:hover. Underline and other properties should still jump instantly.

Show example solution

.link {
  color: #1d4ed8;
  text-decoration: underline;
  transition-property: color;
}

.link:hover {
  color: darkred;
}

Test yourself

What does transition-property: opacity do?
```
.pill {
  transition-property: opacity;
}
```
- Sets the opacity property to 0
- Locks the opacity value so it cannot change
- Only the opacity property transitions smoothly
- Hides the element and removes it
Show answer

Only the opacity property transitions smoothly — Correct. transition-property makes only the opacity value change smoothly; it does not pick a value.

Only the text color should transition

.link {
  transition-property: ____;
  color: #1d4ed8;
}

Show answer

.link {
  transition-property: color;
  color: #1d4ed8;
}

Match each property to what it changes

background-color

Background color
color

Text color
opacity

Transparency
width

Width

Transition-property