transition-property property is used to specify the names of CSS properties to which a transition effect should be applied. Keep in mind that if you specify a shorthand property (for example, background) all of its longhand sub-properties that can be animated will be animated using transitions.
The initial value of
transition-property property is
all. You can apply it to all elements including
::after pseudo-elements. This property is not inheritable. The final computed value of the CSS
transition-property property is the exact same value that you initially supplied. This property is not animatable.
When you provide a list of comma-separated property names for this property, the list is usually mapped to a list of values provided by other transition-related properties like
transition-duration properties. Each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.
This is the formal syntax for using transition-property property.
transition-property: none | <single-transition-property># where <single-transition-property> = all | <custom-ident>
Here are some examples of using this property.
/* Keyword values */ transition-property: none; transition-property: all; transition-property: all, height, left; /* Global values */ transition-property: inherit; transition-property: initial; transition-property: unset;
This value indicates that none of the element’s properties will be transitioned.
This value indicates that all of the element’s properties that can have an animated transition will be transitioned.
This value is used to specify one or multiple comma-separated list of CSS property names that are to be transitioned. If a property is specified multiple times in the value of CSS
transition-property property (either on its own, via a shorthand that contains it, or via the all value), then the transition that starts uses the duration, delay, and timing function at the index corresponding to the last item in the value of
transition-property that calls for animating that property.
Keep in mind that the values
initial cannot be used as part of a comma-separated list of property names. Any list that uses them is syntactically invalid, and will therefore be ignored.
The CSS3 Transitions property is fully supported in 94.29% browsers and partially supported in 0% browsers. Therefore, its overall browser support is 94.29%.
This property is fully supported in IE 10+, Edge 12+, Firefox 16+, Chrome 26+, Safari 7+, Opera 15+, iOS Safari 8+, Android 53+ and Chrome for Android 56+. Support listed is for
transition properties as well as the
In Chrome (up to 43.0), for CSS
transition-delay property, either explicitly specified or written within transition property, the unit cannot be omitted even if the value is 0.
IE10 & IE11 are reported to not support transitioning the
Browser support data has been taken from caniuse.com.
- Read more about the CSS
<transition-property>property on MDN.
- You can also read the CSS
<transition-property>property on CSSWG.
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.