W3cubDocs

/CSS

animation-delay

The animation-delay CSS property sets when an animation starts. The animation can start later, immediately from its beginning, or immediately and partway through the animation.

It is often convenient to use the shorthand property animation to set all animation properties at once.

Syntax

/* Single animation */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/* Multiple animations */
animation-delay: 2.1s, 480ms;

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.

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

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	43 43 Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	12	16 16 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. 49 Prefixed Prefixed Requires the vendor prefix: -webkit- 44 Prefixed Disabled Prefixed Requires the vendor prefix: -webkit- Disabled 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. 5 Prefixed Prefixed Requires the vendor prefix: -moz-	10	30 30 15 Prefixed Prefixed Requires the vendor prefix: -webkit- 12.1 — 15 12 — 15 Prefixed Prefixed Requires the vendor prefix: -o-	9 9 4 Prefixed Prefixed Requires the vendor prefix: -webkit-

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	43 43 Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	?	Yes Yes Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	16 16 49 Prefixed Prefixed Requires the vendor prefix: -webkit- 44 Prefixed Disabled Prefixed Requires the vendor prefix: -webkit- Disabled 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. 5 Prefixed Prefixed Requires the vendor prefix: -moz-	30 30 15 Prefixed Prefixed Requires the vendor prefix: -webkit- 12.1 — 14 12 — 14 Prefixed Prefixed Requires the vendor prefix: -o-	Yes Yes Yes Prefixed Prefixed Requires the vendor prefix: -webkit-	?