Animation-delay - Propriété CSS

Schéma de la syntaxe de animation-delay.

Description des termes utilisés sur le schéma :

• duration est une valeur numérique, positive ou négative, suivie d'une des unités de durée.
• Plusieurs valeurs peuvent être indiquées, en les séparant par des virgules, lorsque plusieurs animations sont déclarées.

Description de la propriété animation-delay.

animation-delay est une propriété utilisable pour paramétrer une animation en CSS. Elle définit un temps d'attente avant que l'animation ne démarre. Ce temps d'attente commence au moment où l'animation est appliquée à l'élément, il sera la plupart du temps observé au chargement de la page.

Pour une présentation générale des animations, reportez-vous à la page animations en CSS.

Valeurs pour animation-delay.

• animation-delay: 2s;

  Une valeur numérique, positive, négative ou nulle, suivie d'une des unités de durée. La valeur par défaut est 0. Cette valeur définit le temps avant que l'animation ne démarre. Le temps est compté à partir du moment où l'animation est appliquée, ce qui correspond en général au chargement de la page.

  Cas des valeurs négatives : si par exemple on précise un délai de -1 seconde, l'animation démarre dès le chargement de la page mais la première seconde n'est pas jouée, comme si l'animation avait commencé une seconde avant le chargement de la page.

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

  Plusieurs valeurs séparées par une virgule. Cette syntaxe est utilisable lorsque plusieurs animations ont été définies par animation-name. Les durées indiquées s'appliquent aux différentes animations dans l'ordre dans lequel elles ont été déclarées. Pour plus de précisions sur les animations multiples, consultez la page animations multiples.

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

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Accéder à la propriété animation-delay par programme.

Modifier la valeur de animation-delay en Javascript.

En Javascript, voici comment modifier la valeur de animation-delay pour un élément el. On voit que Javascript propose une syntaxe avec la notation kebab-case classique en CSS (un tiret pour séparer les mots), et une autre syntaxe avec la notation camel-case (une majuscule pour séparer les mots).

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

Lire en Javascript la valeur de animation-delay.

Le code ci-dessous renvoie la valeur de animation-delay lorsque celle-ci a été affectée via l'attribut style du HTML. La valeur affectée dans la feuille de styles, via un sélecteur CSS, n'est pas prise en compte.

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

Lire la valeur calculée de animation-delay en Javascript.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages : ce sera en priorité la valeur éventuellement affectée via l'attribut style du HTML, puis la valeur affectée via un sélecteur CSS (après résolution des contradictions en fonction des priorités des sélecteurs), une valeur héritée, ou enfin la valeur initiale de animation-delay.

Dans le cas de animation-delay, la valeur est renvoyée en secondes, quelque soit l'unité utilisée pour la définir. Si plusieurs animations sont associées à l'élément, les différentes valeurs de animation-delay sont renvoyées séparées par des virgules.

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

Modifier la valeur de la propriété animation-delay avec JQuery.


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


Relire la valeur calculée de la propriété animation-delay avec JQuery.

Comme en Javascript, la ou les valeurs de animation-delay sont retournées en secondes.

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

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété animation-delay et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de animation-delay. On constate en particulier que toutes les autres unités sont converties en secondes.

Compatibilité des navigateurs avec animation-delay.

La propriété animation-delay, et les animations en général, sont très bien supportées par tous les navigateurs actuels.

1

Support des
animations

2

Propriété
animation-delay

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété animation-delay.

• Module CSS - Animations Niveau 1

  Introduction des animations en CSS, et définition initiale de la propriété animation-delay.
  

  20 Mars 2009

  Document de travail.

  

  

  

• Module CSS - Animations Niveau 2

  Aucun changement.
  

  02 Mars 2023

  Document de travail.

  

  

  

Voir aussi, à propos des animations.

Toutes les définitions concernant les animations en CSS sont regroupées dans la spécification "Module CSS - Animations" (voir CSS Animations). La propriété animation-delay, ainsi que les suivantes, figurent donc dans cette spécification.

Propriétés :

Directives :