CSS animation-delay Property
The CSS animation-delay property specifies when an animation will start. The animation can start later, immediately, or skip ahead to a specific point in the timeline (using a negative delay).
The animation-delay property is one of the CSS3 properties.
The 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 an animation property, they cycle to match the number of animations defined in animation-name.
If an animation’s keyframes omit the starting value, the browser uses the element’s computed styles at the moment the animation begins.
| Property | Value |
|---|---|
| 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
Syntax of CSS animation-delay Property
animation-delay: time | initial | inherit;Example of the animation-delay property:
Example of CSS 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>Example of the animation-delay property with a negative value:
Example of CSS animation-delay Property with negative value
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: delay 5s infinite;
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>Example of the animation-delay property specified in milliseconds:
Example of CSS animation-delay Property with milliseconds
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #8ebf42;
position: relative;
animation: delay 5s infinite;
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>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. |
Practice
What is the correct definition of the CSS animation-delay property?