X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS animation-delay Property

The CSS animation-delay property specifies when an animation will start. The animation can start later, immediately from its beginning, or immediately and partway through the animation.

Default value is 0. Negative values are allowed. If you use negative values, the animation will start as if it had already been playing for N seconds/milliseconds.

Initial Value 0s
Applies to All elements, ::before and ::after pseudo-elements.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.animationDelay = "1s";

Syntax

animation-delay: time | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 120px;
      height: 120px;
      background: #1c87c9;
      position: relative;
      animation: delay 5s infinite;
      animation-delay: 3s;
      }
      @keyframes  delay {
      from {left: 0px;}
      to {left: 300px;}
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example</h2>
    <p>Here the animation starts after 3 seconds.</p>
    <div></div>
  </body>
</html>

Here is an example, when the animation-delay is set to a negative value.

Example

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #ccc;
      position: relative;
      animation: delay 5s 1;
      animation-delay: -2s;
      }
      @keyframes delay {
      from {left: 0px;}
      to {left: 300px;}
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example with negative value.</h2>
    <p>Here, the animation will start as if it had already been playing for 2 seconds.</p>
    <div></div>
  </body>
</html>

Let’s see an example with milliseconds.

Example

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 120px;
      height: 120px;
      background: #8ebf42;
      position: relative;
      animation: delay 5s 1;
      animation-delay: 200ms;
      }
      @keyframes delay {
      from {left: 0px;}
      to {left: 300px;}
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example in milliseconds.</h2>
    <p>Here, the animation will start after 200ms.</p>
    <div></div>
  </body>
</html>

Values

Value Description
time Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. It is optional.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.


Browser support

43.0+
4.0-42.0 -webkit-
12.0+ 16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Practice Your Knowledge

Which statement is incorrect about animation-delay property?



Do you find this helpful?

Related articles