CSS transition-duration attribute

Definition and usage

The transition-duration property specifies the time it takes to complete the transition effect (in seconds or milliseconds).

See also:

CSS Tutorial:CSS Transition

HTML DOM Reference Manual:transitionDuration property

Example

Let the transition effect last for 5 seconds:

div {
  transition-duration: 5s;
}

Try it yourself

CSS syntax

transition-duration: time;

Property value

Value Description
time

Specifies the time it takes to complete the transition effect (in seconds or milliseconds).

The default value is 0, meaning no effect will be effective.

Technical details

Default value: 0
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.transitionDuration="5s"

Browser support

The numbers in the table indicate the first browser version that fully supports the property.

Numbers with -webkit-, -moz-, or -o- prefixes indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-