animation-delay

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%;
}
}
Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback form.

Learn CSS on Codecademy

Edit this page on GitHub

Contributors