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

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works 4+ 10.5+ 10+ 2.1+ 3.2+


  1. User Avatar
    Hungarian Property
    Permalink to comment#

    you can do some pretty stuff with transitions, used it on the colorful buttons on my website.
    Question: how would I use gradient colors with transitions?

  2. User Avatar
    Permalink to comment#


Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.