Abakada: Back to Basics > Language References > CSS Properties > Transition Properties > transition-duration Property

---

Specifies how long a transition effect takes to complete.

CSS	{ transition-duration: time [, time ] }
Script	object.style.transitionDuration = time [, time ]

Parameter	Description	Valid Values
time	Sets the length of time a transition should take to complete.	floating point number representing a time value expressed as seconds (s) or milliseconds (ms)

The property is read/write with a default value of 0s; this attribute is not inherited.

The transition-duration property sets the length of time, or the duration, over which a transition should occur.

transition-duration is specified as a positive floating point number, denoting the amount of time a transition should take to complete, expressed as seconds (s) or milliseconds (ms). A negative value invalidates the CSS declaration.

For a transition to be enabled, transition-duration must always be defined with transition-property, 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.

scale: 1.5	scale: 50%

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.

#earth { transition-property: width, transform; transition-duration: 2.5s, 5s }

Run Sample | View Source

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.

#earth { transition-property: all; transition-duration: 5s }

Run Sample | View Source

Below is an example of setting the transitionDuration property in script, in response to user action.

function change ( ) {
   sphere.style.rotate = "360deg";
   sphere.style.transitionDuration = selector.value;
   ...
}

Run Sample | View Source

For a brief overview, please see Understanding and Using CSS Transitions.

transition, transition-property, transition-timing-function, transition-delay, transition-behavior