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%;
  }
}