CSS animation-delay Property

The CSS animation-delay property is used to specify the delay for the start of an animation. This is one of the CSS3 properties. The animation-delay value is defined in seconds (s) or milliseconds (ms). Its default value is 0 and negative values are also allowed.

The animation-delay property accepts the following values.
- time
- initial
- inherit

Animation-delay Characteristics:

Syntax:


animation-delay: time | initial | inherit;

Values:

Value	Description
time	This value defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. It is an optional one.
initial	It will set the property to its default value.
inherit	This value inherits the property from its parent element.

Example of the animation-delay property:

The following code sets the animation delay to 3 seconds. Thus, the animation starts after 3 seconds.


<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 120px;

        height: 120px;

        background: #00B69E;

        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>

Result:

The following image has shown the output of the above code.

Example of animation-delay property with a negative value:

In the below code, we use animation-delay property with a negative value (-2 seconds).


<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 100px;

        height: 100px;

        background:#38558C;

        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>

Result:

After executing the above code, you will get the result as shown in the below image.

Example of animation-delay property with milliseconds:

In this code, we apply the animation-delay property with 300 milliseconds.


<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 120px;

        height: 120px;

        background: #8F3E87;

        position: relative;

        animation: delay 5s 1;

        animation-delay: 300ms;

      }
      @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 300ms.</p>

    <div></div>
  </body>
</html>