CSS Attributes Index   Transition Properties

---

Sets the CSS 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 properties will transition.	none
all	All properties that can transition will.	all
propertyName	Sets the CSS properties to which a transition effect 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.

transition-property defines which CSS property ( or properties ) of a given element should be animated when a transition effect is applied.

The expected values are none, all, or a string representing one or more CSS property names valid for the element to be animated. Any other value is ignored and invalidates the CSS declaration.

Passing a value of all means the transition will apply to any CSS property on the element that is configured to allow transitions.

element { transition-property: all }

Run Sample | View Source

To apply the effect only to specific properties, we must explicitly define the value as a comma-separated list of properties.

element { transition-property: width, height, filter }

Run Sample | View Source

If not specified, the default value of all is implied.

In its simplest form, a transition needs to define at least a transition-property along with a 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 separate transition attributes in one composite declaration, property and duration parameters are both mandatory, otherwise no transition will occur.

element { transition: propertyName duration }

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 some basic overview, please see Understanding and Using CSS Transitions.

transition, transition-duration, transition-timing-function, transition-delay, transition-behavior