The transition-property property is used to specify the names of the properties that you want to apply a transition to.
You can specify either one property name, a list of comma-separated property names, or use the keyword all to indicate that all properties on an element are to be transitioned. If you don’t want any transition to be applied to any of the element’s properties, you can provide the keyword none.
When you provide a list of comma-separated property names, this list is usually mapped to a list of values provided by other transition-related properties, namely the transition-delay, transition-timing-function, and transition-duration properties. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, 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.
So, when you provide a list of comma-separated property names, if the list contains properties that are not recognized by the browser or that are not animatable (transitionable), these properties must be kept in the list to preserve the matching of indices.
If a property is specified multiple times in the value of transition-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.
It is usually more convenient to specify the transition-property value in the transition shorthand property.
Not all properties in CSS can be transitioned. The W3C has a list of animatable types and properties in the CSS Transitions Module. Oli Studholme has also created a list of animatable CSS properties on his website that you can check out.
Official Syntax
Values
- none
- Indicates that none of the element’s properties are to be transitioned.
- all
- Indicates that all of the element’s properties are to be transitioned.
- <single-transition-property> (one or multiple comma-separated)
-
One or multiple comma-separated list of CSS property names that are to be transitioned.
The values
none,inherit, andinitialcannot 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.
Examples
The following are all valid transition-property values:
transition-property: color;
transition-property: background-color;
transition-property: left, top;
transition-property: transform, color, background-color;
transition-property: letter-spacing, font-size, line-height;
The following example uses different transition-related properties to define different transition effects on an element. The first value in each list will be matched to the first value of other lists, the second to the second, and so on.
.element {
transition-property: color, background-color, left, top;
transition-duration: .6s, .6s, .3s, .2s;
transition-timing-function: steps(3, end), ease, ease-out, ease-out;
}
The color property will be transitioned over 0.6 seconds and the transition is defined by the steps() timing function, and so on..
Live Demo
In the following demo, an element is transitioned from one position to another by transitioning its offset value, and its background color is also transitioned. The cubic-bezier() timing function is used to transition the element’s position.
Browser Support
CSS3 Transitions
Simple method of animating certain properties of an element, with ability to define property, duration, delay and timing function.
W3C Working Draft
Supported from the following versions:
Desktop
- 26
- 16
- 10
- 12
- 6.1
Mobile / Tablet
- 7.0
- 4.4
- No
- 131
- 132
