Animation-delay - Property CSS

Syntax diagram of animation-delay.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• duration is a numerical value, positive or negative, followed by one of the CSS units of duration.
• Several values can be specified, separated by commas, when multiple animations are declared.

Description of the animation-delay property.

animation-delay is a property that can be used to set up an animation in CSS. It defines a delay before the animation starts. This delay begins when the animation is applied to the element and will most often be observed when the page loads.

For a general overview of animations, refer to the page animations in CSS.

Values for animation-delay.

• animation-delay: 2s;

  A numeric value, positive, negative, or zero, followed by one of CSS units of duration. The default value is 0. This value defines the time before the animation starts. The time is counted from the moment the animation is applied, which generally corresponds to the page loading.

  Case of negative values: for example, if a delay of -1 second is specified, the animation starts as soon as the page loads, but the first second is not played, as if the animation had started one second before the page loaded.

• animation-delay: 2s, 5s, ...;

  Several values separated by a comma. This syntax can be used when multiple animations have been defined by animation-name. The durations specified apply to the different animations in the order in which they were declared. For more details on multiple animations, see the page multiple animation.

• animation-delay: initial; (0s) animation-delay: inherit; animation-delay: revert; animation-delay: revertLayer; animation-delay: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Manipulating the animation-delay property programmatically.

Change the value of animation-delay in JavaScript.

In JavaScript, here is how to change the value of animation-delay for an element el. We see that JavaScript offers a syntax with the classic CSS kebab-case notation (a hyphen to separate words), and another syntax with camel-case notation (a capital letter to separate words).

let el = document.getElementById('id'); el.style['animation-delay'] = '100ms'; // or let el = document.getElementById('id'); el.style.animationDelay = '100ms';

Read the value of animation-delay in JavaScript.

The code below returns the value of animation-delay when it has been assigned via the HTML style attribute. The value assigned in the style sheet, via a CSS selector, is not taken into account.

let el = document.getElementById('id'); let value = el.style['animation-delay']; // or let el = document.getElementById('id'); let value = el.style.animationDelay;

Read the computed value of animation-delay in Javascript.

The computed value is the one that results from evaluating the cascade of inheritances: it will primarily be the value possibly assigned via the HTML style attribute, then the value assigned through a CSS selector (after resolving conflicts according to selector priorities), a inherited value, or finally the initial value of animation-delay.

In the case of animation-delay, the value is returned in seconds, regardless of the unit used to set it. If multiple animations are associated with the element, the different values of animation-delay are returned separated by commas.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('animation-delay');

Change the value of the property animation-delay using jQuery.


$('#id').css('animation-delay', '100ms');
// or
$('#id').css('animationDelay', '100ms');


Reread the calculated value of the property animation-delay using JQuery.

As in JavaScript, the value or values of animation-delay are returned in seconds.

let value = $('#id').css('animation-delay');

Other code examples.

Other examples of Javascript and JQuery code are given on the page Javascript and CSS.

Test it yourself.

The buttons below apply the entered value to the property animation-delay and then display either the value as applied, or the calculated value. This second option allows you to see how the value of animation-delay is stored (serialized). It is particularly noticeable that all other units are converted to seconds.

Browsers compatibility with animation-delay.

The property animation-delay, and animations in general, are well supported by all current browsers.

1

Animation
support

2

animation-delay
property

Estimated overall support.

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the animation-delay property.

• CSS Animations Level 1

  This specification introduces changes in property values over time. Animations are similar to transitions, but they do not need an external event to run (JavaScript code, user action, etc.). The different stages of the animation are controlled by an @keyframes at-rule.
  Many parameters can be adjusted when applying an animation: number of repetitions, duration, whether the animation reverses its start and end or not, etc. Each of these parameters corresponds to a property.

  Regarding animation-delay. Introduction of animations in CSS, and initial definition of the animation-delay property.
  

  March 20, 2009

  Working Draft.

  

  

  

• CSS Animations Level 2

  This level 2 of the specification mainly introduces scroll-driven animations. These are described in a separate module, but there are necessarily interactions with the animation module. In particular, the animation-timeline property is introduced.
  Another property is added: animation-composition, which defines how animations combine when they are applied to the same element.

  Regarding animation-delay. No change.
  

  March 02, 2023

  Working Draft.

  

  

  

See also, regarding the animations.

All definitions concerning CSS animations are grouped in the specification CSS Animations.The property animation-delay, as well as the following ones, are therefore included in this specification.

Properties:

At-rules: