CSS animation-delay Property

Definition and Usage

animation-delay The property defines when the animation starts.

The animation-delay value is in seconds or milliseconds.

Tip:Negative values are allowed, -2s makes the animation start immediately but skip 2 seconds into the animation.

See Also:

CSS3 Tutorial:CSS Animation

HTML DOM Reference Manual:animationDelay Property

Example

Example 1

Wait for 2 seconds before starting the animation:

div {
  animation-delay: 2s;
}

Try It Yourself

Example 2

Negative values, please note that the animation skips 2 seconds into the animation cycle:

div {
  animation-delay: -2s;
}

Try It Yourself

CSS Syntax

animation-delay: time;
Value Description Test
time Optional. Defines the time to wait before the animation starts, in seconds or milliseconds. The default value is 0. Test

Technical Details

Default Value: 0
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.animationDelay="2s"

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 Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-