CSS3 animation-duration Property

Example

Make the animation complete in one second:

animation-duration: 1s;
-webkit-animation-duration: 1s; /*Safari and Chrome*/

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

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

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


Definition and Usage

The animation-duration property defines how many seconds or milliseconds an animation takes to complete one cycle.

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


Syntax

animation-duration: time;

Value Description
time Specifies the length an animation takes to finish. Default value is 0, meaning there will be no animation