DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

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:

| Initial value | 0s |
| Applies to | all elements, ::before and ::after pseudo elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
| JavaScript syntax | object.style.animationDelay = "1s"; |

Syntax:


animation-delay: time | initial | inherit;

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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

Animation-delay property

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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

Animation-delay with negative value

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>

Enter fullscreen mode Exit fullscreen mode

Result:

By running the above code, you will get the result as given in the below image.

Animation-delay with 300 ms

Browser-Support:

Browser-support

The post CSS animation-delay Property appeared first on Share Point Anchor.

Top comments (0)