CSS animation-delay

The animation-delay property is used to specify the time after which an animation starts.

CSS

animation-delay: value;

Animations in CSS allow you to change the state of an element. While the animation-delay property is used to specify the delay of animations, there are other animation properties as well like animation-name, animation-duration, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.

See the Pen CSS animation-delay by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

Note: For animations to be effective, it is necessary to define the animation-duration property because the duration of animations is zero by default.

Values

time : Specifies the time in seconds (written in s) or milliseconds (written in ms) after which an animation starts. On giving negative values, the animation starts such that it appears as if it had already been playing for that much time. The default animation delay is 0s.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Examples

In the following demo, an animation named "stretch" is applied to three blocks which increases the width to twice. The time when the animation starts for the three blocks is set to 0 second, 400 milliseconds and 3 seconds using the animation-delay property. The prefix -webkit- is used for better browser support.

HTML

<div id="delay1">No delay</div>
<div id="delay2">Delay - 400ms</div>
<div id="delay3">Delay - 3s</div>

CSS

@keyframes stretch {
  0% {width: 100px;}
  100% {width: 200px;}
}

div {
  margin-top: 10px;
  width: 100px;
  height: 100px;
  background-color: #007399;
  -webkit-animation-name: stretch; 
  animation-name: stretch;
  -webkit-animation-duration: 2s; 
  animation-duration: 2s;
}

#delay2 {               /* delay for second block */
  -webkit-animation-delay: 400ms; 
  animation-delay: 400ms;
}

See the Pen CSS animation-delay by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

Giving different delays for different animations

If multiple animations are applied to an element, then you can define different delays for different animations.

If only one value is given to the animation-delay property, then it decides the delay of all the animations applied to the specified element. To give them different time delays, give multiple comma separated values to the animation-delay property corresponding to the respective comma separated animation names given to the animation-name property.

Look at this code.

CSS

animation-name: reshape, colorChange;
animation-delay: 50ms, 1.5s;

In this code, the delays for the animations named "reshape" and "colorChange" are 50 milliseconds and 1.5 seconds respectively.

Look at the following demo in which the shape of a div starts changing after 50 milliseconds and its background color starts changing after 1.5 seconds.

HTML

<div></div>

CSS

@keyframes reshape{
  0% { border-radius: 50%; }
  50% { border-radius: 0%; }
  100% { border-radius: 50%; }
}

@keyframes colorChange{
  0% { background-color: yellow; }
  100% { background-color: green; }
}

div {
  width: 150px;
  height: 150px;
  background-color: #8f5656;
  border-radius: 50%;
  -webkit-animation-name: reshape, colorChange;
  animation-name: reshape, colorChange;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 50ms, 1.5s;
  animation-delay: 50ms, 1.5s;
}

See the Pen CSS animation-delay example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

Browser Support

This property is supported in all the major browsers.