CSS transition-property Property

CSS transition-property property specifies the name of the CSS property on which the transition effects will be applied.

For example, if you hover over the below boxes, their width, and background color change respectively, this is because the transition is applied to their width and background-color properties respectively.

Hover over the boxes below to see the transition effect:

Hover Over Me!!!
Hover Over Me!!!

Try out the example below to see how it works:

Example:

.div1{
  transition-property: width;
}

.div2{
  transition-property: background-color;
}

The transition-property property can also accept multiple values. Multiple values must be comma-separated. See the example below:

Example:

div{
  transition-property: width, background-color, color;
}

Note: Always specify the transition-duration property while specifying the transition-property property. Otherwise, the transition duration sets to 0 and we can’t observe it.


CSS Syntax

The transition-property property has the following syntax:

transition-property: none|all|property-name|initial|inherit;

Property Values

The transition-property property accepts the following values:

noneSpecifies no transition.
allTransition effects will be applied to all properties.
property-nameThe CSS property on which the transition effects will be applied. It can be any valid CSS property that allows transition.
initialSets the transition-property property to its default value(all).
inheritInherits the transition-property from its parent element.

General Info

Default Valueall
InheritedNo
JavaScript Usageelement.style.transitionProperty = “width”