CSS transition-property Property

The transition-property property specifies the property to animate.

Multiple properties can be specified with a comma separated list.

If no property is specified, all animatable properties will transition.

Example

#

The transition-property for the element below is background-color.
Hover over the rectangle and see the background gradually change.

<style>
  .transition-property {
    width: 100px;
    height: 100px;
    background: orangered;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 1s;
  }

  .transition-property:hover {
    background-color: purple;
  }
</style>

<div class="transition-property"></div>

Tip: Always set a transition-property value, because the list of animatable properties may change.

Syntax

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

Values

#

Value Description
none No property will get a transition effect
all Default. All properties will get a transition effect
properties A comma-separated list of properties to transition
initial Sets the value to its default value.
inherit Inherits the property from its parent element.

Browser support

This table shows when transition-property support started for each browser.

Chrome
26.0 Mar 2013
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
12.1 Nov 2012
Safari
6.1 Jun 2013

You may also like

Guides