CSS transition-property Property

The CSS 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 ::before and ::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-delay, transition-timing-function, and 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.

Syntax

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;

Acceptable Values

none

This value indicates that none of the element’s properties will be transitioned.

all

This value indicates that all of the element’s properties that can have an animated transition will be transitioned.

<single-transition-property>

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 none, inherit, and 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.

Working Examples

See the Pen CSS transition-property Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

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 transitionend event.

Transitionable properties with calc() derived values are not supported below and including IE11. IE11 does not support CSS transitions on the SVG fill property.

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 column-count property.

Browser support data has been taken from caniuse.com.

Further Reading

  1. Read more about the CSS <transition-property> property on MDN.
  2. You can also read the CSS <transition-property> property on CSSWG.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

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.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top