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

    ewfwefew

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```