CSS animation-delay Property

Start the animation after 2 seconds:

div {
animation-delay: 2s;
}

Definition and Usage

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

After the time specified in the delay, the animation will start running.

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

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

Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
object - object in javascript means the element on which animation-delay is applied.
Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

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.
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

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

div {
animation-delay: -2s;
}