The 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.
Initial value | 0s |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
<time>
- 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
-1s
as 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.
Formal syntax
<time>#
Examples
See CSS animations for examples.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations The definition of 'animation-delay' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 43 Yes -webkit- | Yes | 161 49 -webkit- 5 -moz- | 10 | 12.1 — 15 15 -webkit- 12 — 15 -o- | 9 4 -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 43 Yes -webkit- | ? | Yes Yes -webkit- | 16 49 -webkit- 5 -moz- | Yes | 12.1 — 15 15 -webkit- 12 — 15 -o- | Yes Yes -webkit- |
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.
See also
- Using CSS animations
- JavaScript
AnimationEvent
API