CSS animation-delay Property
Tags: learncss, cssa
Published: 2021-02-19 06:59:15

---
title: CSS animation-delay Property
published: true
date: 2021-02-17 11:59:25 UTC
tags: LearnCSS,CSSA
canonical_url: https://sharepointanchor.com/learn-css/css-animation-delay-property/
---

The [CSS](https://sharepointanchor.com/learn-css/ "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;

```

## 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.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/NVWCXiiJm1.gif)<figcaption>Animation-delay property</figcaption>

## 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.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/wwksSUttWZ.gif)<figcaption>Animation-delay with negative value</figcaption>

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

```

## Result:

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

![](https://sharepointanchor.com/wp-content/uploads/2021/02/ZRaWibW0BT.gif)<figcaption>Animation-delay with 300 ms</figcaption>

## Browser-Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_0GVci9GfAl.png)<figcaption>Browser-support</figcaption>

The post [CSS animation-delay Property](https://sharepointanchor.com/learn-css/css-animation-delay-property/) appeared first on [Share Point Anchor](https://sharepointanchor.com).