Animation-delay - Propriété CSS
Résumé des caractéristiques de la propriété animation-delay
0sanimation-delay ne peut pas être animée.Schéma syntaxique de animation-delay.
Légende :
durationest 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 démarre 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 animation.
Syntaxes 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 pageanimation.
Valeurs globales
(communes à toutes les propriétés)
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.
Manipulation de 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'] = '1s';
// ou
let el = document.getElementById('id');
el.style.animationDelay = '1s';
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électeur),
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', '1s');
// ou
$('#id').css('animationDelay', '1s');
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.
Prise en charge par les navigateurs (compatibilité).
La propriété animation-delay, et les animations en général, sont très bien supportées par tous les navigateurs actuels.
animation-delay.animations
animation-delayNavigateurs 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
Historique 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 2009Document de travail.
-
Module CSS - Animations Niveau 2
Aucun changement.02 Mars 2023Document 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.