Grow your CSS skills. Land your dream job.

transition-property

Last updated on:

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+

Comments

  1. 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. retfwe
    Permalink to comment#

    ewfwefew

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".