animation-delay - Propriété CSS
Résumé des caractéristiques de la propriété animation-delay
0s
animation-delay
ne peut pas être animée.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 unité de temps (voir les unités CSS 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 Object. 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
animation
. - animation-delay:
initial
; animation-delay:inherit
; animation-delay:revert
; animation-delay:revert-layer
; animation-delay:unset
;La valeur initiale est :
.0s
Manipulation de la propriété animation-delay
par programme.
Les modifications de la propriété animation-delay
sont prises en compte immédiatement. Si l'animation n'est pas encore démarrée, l'effet de
la modification sera visible au prochain démarrage. Si l'animation est déjà en cours, la modification de animation-delay
provoque généralement
un saut dans la progression de l'animation.
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).
function setAnimationDelay(el) {
el.style['animation-delay']='1s';
// ou
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.
function getAnimationDelay(el) {
alert(el.style['animation-delay']);
// ou
alert(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.
function getCalcAnimationDelay(el) {
alert(window.getComputedStyle(el).getPropertyValue('animation-delay'));
}
Modifier la valeur de la propriété animation-delay
avec JQuery.
function setAnimationDelay(el) {
$(el).css('animation-delay','500ms');
// ou
$(el).css('animationDelay','500ms');
}
Lire 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.
function getCalcAnimationDelay(el) {
alert($(el).css('animation-delay'));
// ou
alert($(el).css('animationDelay'));
}
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
animation-delay
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que animation-delay
.
Les spécifications CSS éditées par le W3C sont organisées en modules. animation-delay
fait partie du Module CSS - Animations (CSS Animations). Les définitions suivantes sont également décrites dans ce même module.