animation-delay

Published Jul 1, 2021Updated Dec 14, 2023
Contribute to Docs

Defines when an animation starts.

Syntax

animation-delay: <value>;

where <value> can be one of the following:

  • Seconds: 2s
  • Milliseconds: 200ms

Note: If not provided, an animation will occur immediately because the default value is 0s.

Example 1

Wait 2s then run the animation:

div {
height: 200px;
width: 200px;
background-color: blue;
animation-name: disappear;
animation-duration: 2s;
animation-delay: 2s;
}
@keyframes disappear {
from {
background-color: blue;
}
to {
background-color: white;
}
}

Example 2

Add a second value to wait 6000ms then run the second animation:

div {
height: 200px;
width: 200px;
background-color: blue;
animation-name: bluewhiteblue, slideright;
animation-duration: 4s, 5000ms;
animation-delay: 2s, 6000ms;
}
@keyframes bluewhiteblue {
0% {
background-color: blue;
}
50% {
background-color: white;
}
100% {
background-color: blue;
}
}
@keyframes slideright {
from {
margin-left: 0%;
}
to {
margin-left: 100%;
}
}

In example 1 the animation is delayed for two seconds then slides right for two seconds before the background color changes from blue to white.

Example 1, delay animation for 2 seconds

In example 2 there are two animations, the first is delayed two seconds. Half way through the animation the background color changes to white and back to blue at the end. The second is delayed 6000ms then slides to the right for 5000ms.

Example 2, after the first animation delay the second animation for 6000 milliseconds

All contributors

Looking to contribute?

Learn CSS on Codecademy