CSS animation-delay

Defines when an animation starts.

Syntax

animation-delay: <value>;

Copy to clipboard
Copy to clipboard

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

Copy to clipboard
Copy to clipboard

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

Copy to clipboard
Copy to clipboard

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.

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.