Property Description

The animation-delay property specifies when an animation is to start.

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

This property has the following syntax:

animation-delay: time|initial|inherit;

Property Values

Value	Description
time	(optional) Specifies the time at which the animation should begin. This is a time offset from when the the animation is applied to the element. The time can be specified as a negative number, at which the animation will begin immediately, but the animation will start at the specified time into the animation. The time may be specified in either seconds (by specifying "s" as the unit) or milliseconds (by specifying "ms" as the unit). If no units are specified, seconds are assumed. Default = 0 (animation starts immediately)
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

This example shows how to specify that the animation will start 2 seconds into the cycle:

<style type="text/css"> 

div.box1
{
  width:50px;
  height:50px;
  background:blue;
  position:relative;
  animation:boxmove 5s infinite;
  animation-delay:0;
  /* Firefox */
  -moz-animation:boxmove 5s infinite;
  -moz-animation-delay:0;
  /* Safari and Google Chrome */
  -webkit-animation:boxmove 5s infinite;
  -webkit-animation-delay:0;
}

div.box2
{
  width:50px;
  height:50px;
  background:red;
  position:relative;
  animation:boxmove 5s infinite;
  animation-delay:2s;
  /* Firefox */
  -moz-animation:boxmove 5s infinite;
  -moz-animation-delay:2s;
  /* Safari and Google Chrome */
  -webkit-animation:boxmove 5s infinite;
  -webkit-animation-delay:2s;
}

div.box3
{
  width:50px;
  height:50px;
  background:green;
  position:relative;
  animation:boxmove 5s infinite;
  animation-delay:-2s;
  /* Firefox */
  -moz-animation:boxmove 5s infinite;
  -moz-animation-delay:-2s;
  /* Safari and Google Chrome */
  -webkit-animation:boxmove 5s infinite;
  -webkit-animation-delay:-2s;
}

@keyframes boxmove
{
  from {left:0px;}
  to {left:210px;}
}

@-moz-keyframes boxmove /* Firefox */
{
  from {left:0px;}
  to {left:210px;}
}

@-webkit-keyframes boxmove /* Safari and Google Chrome */
{
  from {left:0px;}
  to {left:210px;}
}
</style>

<div class="box1"></div>
<br/>
<div class="box2"></div>
<br/>
<div class="box3"></div>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera
4.0 -webkit-	16.0 5.0 -moz-	10.0	4.0 -webkit-	12.1 12.0 -o- 15.0 -webkit-

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	0