CSS3 animation-delay Property

Example

Start the animation after 2 seconds:

div {
animation-delay: 2s;
}

Try it Yourself »

More “Try it Yourself” examples below.


Definition and Usage

The animation-delay property specifies a delay for the start of an animation.

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

Default value: 0s
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.animationDelay=”1s” Try it
CSS Syntax
animation-delay: time|initial|inherit;
Property Values
Value Description Code
time Optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. Default value is 0. Negative values are allowed. If you use negative values, the animation will start as if it had already been playing for N seconds/milliseconds. #myDIV {
animation-delay:1s;
}
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
Example 1

Using negative values. Here, the animation will start as if it had already been playing for 2 seconds:

div {
animation-delay: -2s;
}

Try it Yourself »