transition-property

The transition-property property, normally used as part of transition shorthand, is used to define what property, or properties, you want to apply a transition effect to.

This is done by providing the name of the property as the value:

.example {
    transition-property: color;
}

The value can be one of the following:

• A single property name, as in the example above
• A comma-separated list of property names (shorthand or longhand), for transitioning multiple properties on a single element
• The keyword none, which indicates that no property will transition
• The keyword all, which indicates that all properties will transition (the default)

When comma separating the values, the property names are essentially mapped to the other transition properties defined (transition-timing-function, transition-duration, and transition-delay). So this means if a comma-separated list of properties includes one or more property names that are invalid, the other properties will still transition, and will map to their intended related transition properties.

The spec describes this by saying:

“[U]nrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.”

When using a value of none or the universal keywords inherit or initial, these values cannot be used as part of a comma-separated list, otherwise this will result in a syntax error and the entire line will be ignored.

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

.example {
    -webkit-transition-property: color;
    -moz-transition-property: color;
    -o-transition-property: color;
    transition-property: color;
}

IE10 (the first stable version of IE to support transition-property) does not require the -ms- prefix.

Related Properties

• transition
• transition-delay
• transition-timing-function
• transition-duration

Other Resources

• transition-property on W3C
• transition-property on MDN

Browser Support