The animation-delay property defines when the animation will start. It allows an animation to begin execution some time after it is applied, or to appear to have begun execution some time before it is applied.
The initial value is ‘0s’, which means that the animation will start to play as soon as it is applied to an element. A positive time value represents an offset which defines how long of a delay there is between the start of the animation (when the animation is applied to the element via the animation properties) and when it begins executing.
You can also provide a negative animation-delay value. A negative value, just like ‘0s’, means that the animation will execute instantaneously as soon as it is applied, but is automatically progressed by the absolute value of the delay, as if the animation had started the specified time in the past, and so it appears to start partway through its play-cycle already. For example, if you provide an animation-delay value of ‘-2s’, the animation will start instantaneously as soon as it is applied but it will appear as if it had started 2s before you had applied it.
If an animation’s keyframes have an implied starting value, the values are taken from the time the animation starts, not some time in the past.
You can specify one or multiple comma-separated animation-delay values. When you provide a list of comma-separated values, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-direction, animation-timing-function, and animation-name properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.
For example, if you provide two animation-delay values, then the first value determines the delay of the first animation in the list of animation names provided by animation-name, and the second delay specifies the delay of the second animation.
The animation-delay property is usually specified as part of the animation shorthand property.
Official Syntax
Values
- <time>
-
A time
<time>value which defines how long of a delay there is between the start of the animation (when the animation is applied to the element via these properties) and when it begins executing. A delay of ‘0s’ (the initial value) means that the animation will execute as soon as it is applied.A negative delay is valid. Similar to a delay of ‘0s’, it means that the animation executes immediately, but is automatically progressed by the absolute value of the delay, as if the animation had started the specified time in the past, and so it appears to start partway through its play-cycle already. If an animation’s keyframes have an implied starting value, the values are taken from the time the animation starts, not some time in the past.
Examples
The following example delays an animation named “bounce” till after the end of the “shake” animation.
.element {
animation-name: bounce, shake;
animation-duration: 2s, 1s;
animation-delay: 1s, 0s;
animation-timing-function: linear, ease-in;
/* ... */
}
Live Demo
Here is a live demo of the animation-delay property:
Browser Support
CSS Animation
Complex method of animating certain properties of an element
W3C Working Draft
Supported from the following versions:
Desktop
- 43
- 16
- 10
- 12
- 9
Mobile / Tablet
- 9.0
- 130
- No
- 130
- 130
