CSS3 transition-duration Property

Example

Let the transition effect last for 5 seconds:

transition-duration: 5s
-webkit-transition-duration: 5s; /*Safari and Chrome*/
-o-transition-duration: 5s /*Opera*/

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The transition-duration property is not supported in any browsers.

Safari and Chrome support an alternative, the -webkit-transition-duration property.

Opera support an alternative, the -o-transition-duration property.


Definition and Usage

The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.

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


Syntax

transition-duration: time;

Value Description
time Specifies how many seconds or milliseconds a transition effect takes to complete. Default value is 0, meaning there will be no effect