CSS3 animation-delay Property

Example

Wait two seconds, then start the animation:

animation-delay: 2s;
-webkit-animation-delay: 2s; /*Safari and Chrome */

Try it yourself »
More examples at the bottom of this page.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

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

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


Definition and Usage

The animation-delay property defines when the animation will start.

The animation-delay value is defined in seconds (s) or milliseconds (ms).

Tip: Negative values are allowed, -2s makes the animation start at once, but starts 2 seconds into the animation.

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


Syntax

animation-delay: time;

Value Description
time Optional. Defines the number of seconds or milliseconds to wait before the animation will start. Default value is 0


Examples

Try it Yourself


Example

Negative values, notice that the animation starts 2 seconds into the animation cycle:

animation-delay: -2s
-webkit-animation-delay: -2s /*Safari and Chrome*/

Try it yourself »