CSS animation-delay Property

Start the animation after 2 seconds:

div {
animation-delay: 2s;
}

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

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
animation-delay	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-

animation-delay: time|initial|inherit;

Value	Description	Demo
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.	Play it »
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

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

div {
animation-delay: -2s;
}