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.
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.
transition-property: none | all | properties |
initial | inherit;
| 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. |
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 |
