CSS animation-delay property specifies how long the animation should wait before it starts.
The animation-delay is specified either in seconds(s), or milliseconds(ms). By default, it is set to 0s, which means that the animation starts instantly without any delay. It can be positive, negative, or zero. See implementation in the example below:
Example:
.div1{
animation-delay: 2s;
}
.div2{
animation-delay: 4s;
}
When the animation-delay is set to a negative value, it skips that much time and starts as if it had already been playing for that time period.
For example, if an animation has a 5s duration and you set the animation-delay to -2s, the animation skips the first 2s and is played only for the last 3s and behaves as if it had already been playing for those 2s. See the example below:
Example:
.div1{
animation-delay: -2s;
}
CSS Syntax
The animation-delay property has the following syntax:
animation-delay: time|initial|inherit;
Property Values
The animation-delay property accepts the following values:
| time | Specifies the delay in seconds(s), or milliseconds(ms). It can be positive, negative, or zero. The default value is 0s. |
| initial | Sets the animation-delay property to its default value(0s). |
| inherit | Inherits the animation-delay property from the parent element. |
General Info
| Default Value | 0s |
| Inherited | No |
| JavaScript Usage | element.style.animationDelay = “2s” |
