CSS animation-delay Property

❮ Prev Next ❯

The CSS animation-delay property specifies the start of an animation. The animation can start later, immediately after the start, or immediately and halfway through the animation.

The animation-delay property is one of the CSS3 properties.

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

When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.

If an animation’s keyframes have an implicit starting value, the values will be taken from the time when animation starts.

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 of the animation-delay property:

<!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>

Try it Yourself »

Example of the animation-delay property with a negative value:

<!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>

Try it Yourself »

Example of the animation-delay property specified in milliseconds:

<!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>

Try it Yourself »

Values

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