Abakada: Back to Basics > Language References > CSS Properties > Transition Properties > transition-property Property
Lists the CSS property or properties to which a transition effect should be applied.
| CSS |
{ transition-property: none | all | propertyName } |
| Script |
object.style.transitionProperty = none | all | propertyName |
| Parameter |
Description |
Valid Values |
| none |
No property will transition. |
the keyword none |
| all |
All properties that can transition will. |
the keyword all |
| propertyName |
A list of one or more CSS property names to which a transition should be applied. |
string representing a CSS property name |
The property is read/write with a default value of all; this attribute is not inherited.
The transition-property defines the CSS property ( or properties ) to which a transition should be applied.
transition-property is specified as a comma-separated list of one or more CSS properties that is involved in a transition, or by the keywords none or all.
For a transition to be enabled, transition-property must always be defined with transition-duration, as no transition can occur if neither property nor duration is explicitly set.
element { transition-property: propertyName; transition-duration: duration }
Even when using the shorthand transition notation, which serves to set the individual transition attributes in one composite declaration, property and duration parameters are both mandatory, otherwise no transition will occur.
element { transition: propertyName duration }
When transition-property specifies more than one CSS property, transition-duration must also be set for each property accordingly, meaning 1 duration value for the 1st property, 1 duration value for the 2nd property, and so on.
Setting duration for a single property is fairly straightforward.
element { transition-property: scale; transition-duration: 1s }
Here is how a box behaves when scale is applied with a timed transition.
Enabling a transition for multiple properties is specified as a comma-separated list of values for both property and duration. In this situation, each property involved in a transition can have a different duration value.
#img { transition-property: width, height, border-radius, filter;
transition-duration: 2s, 4s, 8s, 6s }
Alternately, when transition-property value is set to all, only one transition-duration value is accepted, meaning the same duration is applied to all properties configured to allow transitions. Any other duration value, if present, is truncated and ignored.
#img { transition-property: all; transition-duration: 3s }
NOTE: This section is currently under major reconstruction. Please bear with whatever inconvenience you may encounter; we hope to complete the job at the soonest possible time. 
For a brief overview, please see Understanding and Using CSS Transitions.
transition, transition-duration, transition-timing-function, transition-delay, transition-behavior