CSS3 transition-propertyProperty

Browser Support

The numbers in the table indicate the first browser version that supports the property.

Numbers immediately preceding -webkit-, -ms-, or -moz- refer to the first browser version that supports the prefixed property.

Property definition and usage instructions

transition-property is a property in CSS3 used to specify which CSS properties the transition effect applies to. It allows you to explicitly specify the properties to transition, so that when an element's state changes, only the specified properties are transitioned, rather than all properties.

The value of this property can be a CSS property name, or the keyword all, meaning the transition effect applies to all properties.

For example, if you only want to apply a transition effect when the color changes, you can write:

.element {
  transition-property: color;
}

In this way, when the color of the .element element changes, a transition effect will occur.

If you want to apply the transition effect to all properties, you can use the all keyword:

.element {
  transition-property: all;
}

This way, no matter which property changes, a transition effect will occur.

You can also specify multiple properties at once, separated by commas:

.element {
  transition-property: width, height, opacity;
}

In this way, when the width, height, or opacity of the .element element changes, a transition effect will occur.

Syntax

More Examples

Transition effects - change two properties
Hover over a div element to change width and height with a smooth transition effect.