animation-delay CSS property specifies when an animation should start. You can begin the animation at a future point in time, immediately and from its begining, or immediately and partway through the animation cycle.
/* Single animation */ animation-delay: 3s; animation-delay: 0s; animation-delay: -1500ms; /* Multiple animations */ animation-delay: 2.1s, 480ms;
It is often convenient to use the shorthand property
animation to set all animation properties at once.
|Applies to||all elements, |
|Computed value||as specified|
|Canonical order||the unique non-ambiguous order defined by the formal grammar|
- The time offset, from the moment at which the animation is applied to the element, at which the animation should begin. This may be specified in either seconds (
s) or milliseconds (
ms). The unit is required.
- A positive value indicates that the animation should begin after the specified amount of time has elapsed. A value of
0s, which is the default, indicates that the animation should begin as soon as it's applied.
A negative value causes the animation to begin immediately, but partway through its cycle. For example, if you specify
-1sas the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence. If you specify a negative value for the animation delay, but the starting value is implicit, the starting value is taken from the moment the animation is applied to the element.
Note: When you specify multiple comma-separated values on an
animation-* property, they will be assigned to the animations specified in the
animation-name property in different ways depending on how many there are. For more information, see Setting multiple animation property values.
See CSS animations for examples.
The definition of 'animation-delay' in that specification.
|Working Draft||Initial definition.|
|Feature||Chrome||Edge||Firefox (Gecko)||Internet Explorer||Opera||Safari (WebKit)|
|Feature||Android||Edge||Firefox Mobile (Gecko)||IE Phone||Opera Mobile||Safari Mobile||Chrome for Android|
 In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a
-webkit- prefixed version of the property for web compatibility reasons behind the preference
layout.css.prefixes.webkit, defaulting to
false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to