CSS animation-delay

The animation-delay property in CSS specifies a delay before the start of an animation. This property allows you to create a time gap before the animation begins, enhancing control over animations.

Syntax of animation-delay

</>
Copy
animation-delay: time | initial | inherit;

Values

ValueDescription
timeDefines the delay in seconds (s) or milliseconds (ms) before the animation starts. Default value is 0.
initialSets the property to its default value, which is 0.
inheritInherits the value from the parent element.

Default Value

0

Examples for animation-delay

Using the CSS animation-delay Property

The following examples demonstrate how the animation-delay property can be used to control the start time of an animation.

</>
Copy
/* Delay the animation by 2 seconds */
.box {
  animation-delay: 2s;
}

/* No delay, animation starts immediately */
.box {
  animation-delay: 0s;
}

/* Inherit the delay value from the parent element */
.box {
  animation-delay: inherit;
}

Example 1: Applying animation-delay of 3 seconds

The following example demonstrates a simple animation with a delay before it starts.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  @keyframes slidein {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: slidein;
    animation-duration: 2s;
    animation-delay: 3s;
  }
</style>
</head>
<body>

<h1>CSS animation-delay Example</h1>

<div class="box"></div>

</body>
</html>

Example 2: Applying animation-delay of 1 second

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  @keyframes slidein {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: slidein;
    animation-duration: 2s;
    animation-delay: 1s;
  }
</style>
</head>
<body>

<h1>CSS animation-delay Example</h1>

<div class="box"></div>

</body>
</html>

Browser Support

The animation-delay property is supported in most modern browsers. Below is a compatibility table:

BrowserVersion
Chrome43
Edge10
Firefox16
Safari9
Opera30