CSS animation-delay Property

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:

timeSpecifies the delay in seconds(s), or milliseconds(ms). It can be positive, negative, or zero. The default value is 0s.
initialSets the animation-delay property to its default value(0s).
inheritInherits the animation-delay property from the parent element.

General Info

Default Value0s
InheritedNo
JavaScript Usageelement.style.animationDelay = “2s”