CSS Attributes Index   Transition Attributes

---

Sets or retrieves the separate transition attributes ( transition-property, transition-duration, transition-timing-function, transition-delay, and transition-behavior ) as a composite declaration.

CSS	{ transition: propertyName duration [ easing delay behavior ] }
Script	object.style.transition = propertyName duration [ easing delay behavior ]

Values in square brackets [ ] are optional.

The following describes the possible composite attributes that can be declared for one CSS property ( single-property transition ).

Parameter	Description	Valid Values
propertyName	Required. Sets the CSS properties to which a transition effect should be applied.	none | all | string representing a CSS property name
duration	Required. Sets the length of time a transition effect should take to complete.	floating point number representing a time value expressed as seconds (s) or milliseconds (ms)
easing	Optional. Sets the acceleration curve of the transition effect.	linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n) | initial | inherit
delay	Optional. Sets the length of time to wait before starting the transition effect.	floating point number representing a time value expressed as seconds (s) or milliseconds (ms)
behavior	Optional. Specifies whether transitions will be started for properties whose animation behavior is discrete.	allow-discrete | normal

The listed valid values correspond to the values valid for each of the separate transition attributes ( transition-property, transition-duration, transition-timing-function, transition-delay, and transition-behavior ).

The transition property composite value can specify one or more single-property transitions, separated by commas.

The transition property is a shorthand notation for setting any or all of the five transition property values in one composite declaration.

Separate properties can be used to specify each of the individual properties, though, if desired or when needed.

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-property, transition-duration, transition-timing-function, transition-delay, transition-behavior