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 beginning, or immediately and partway through the animation cycle.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
It is often convenient to use the shorthand property
animation to set all animation properties at once.
/* Single animation */ animation-delay: 3s; animation-delay: 0s; animation-delay: -1500ms; /* Multiple animations */ animation-delay: 2.1s, 480ms;
- 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.|
|Applies to||all elements, |
|Computed value||as specified|
|Canonical order||the unique non-ambiguous order defined by the formal grammar|
12.1 — 15
12 — 15 -o-
|Feature||Android webview||Chrome for Android||Edge mobile||Firefox for Android||Opera Android||iOS Safari||Samsung Internet|
12.1 — 14
12 — 14 -o-
1. Before Firefox 57, Firefox does not repaint elements outside the viewport that are animated into the viewport with a delay. This bug affects only some platforms, such as Windows.
2. From version 44: this feature is behind the
layout.css.prefixes.webkit preference (needs to be set to
true). To change preferences in Firefox, visit about:config.