MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

La propriété animation-delay définit la durée d'attente avant de démarrer une animation une fois qu'elle a été appliquée à un élément.

animation-delay: 3s;
animation-delay: 2s, 4ms;

La valeur par défaut, 0s, indique que l'animation doit démarrer dès qu'elle est appliquée. Dans les autres cas, la valeur indique le décalage à observer entre le début de l'animation et le moment où celle-ci a été appliquée sur l'élément.

Si des valeurs négatives sont utilisées, l'animation débutera immédiatement en étant déjà « avancée ». Par exemple, si on utilise la valeur -1s comme durée, l'animation commencera immédiatement avec l'état qu'elle aurait « normalement » eue au bout d'une seconde.

Généralement, on passera par la propriété raccourcie animation afin de définir l'ensemble des propriétés liées aux animations en une seule fois.

Valeur initiale0s
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Valeurs

<time>
La durée avec laquelle décaler le début de l'animation à partir du moment où celle-ci a été appliquée à l'élément. La valeur peut être indiquée en secondes (s comme suffixe) ou en millisecondes (ms comme suffixe). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.

Note : Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété animation-*, selon leur quantité, elles seront différemment affectées aux animations définies par animation-name. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.

Syntaxe formelle

<time>#

Exemples

CSS

p {
  animation-duration: 3s;
  animation-delay: 15s;
  animation-name: glissement;
  animation-iteration-count: infinite;
}
@keyframes glissement {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

HTML

<p>
  La Chenille et Alice se considérèrent un instant en silence.
  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
  la parole d’une voix endormie et traînante.
</p> 

Résultat

Spécifications

Spécification État Commentaires
CSS Animations
La définition de 'animation-delay' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Support simple (Oui)-webkit
43.0
5.0 (5.0)-moz
16.0 (16.0)[1]
(Oui)-webkit
(Oui)
10 12-o
12.10
4.0-webkit
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile Chrome pour Android
Support simple (Oui)-webkit 5.0 (5.0)-moz
16.0 (16.0)[1]
(Oui)-webkit
(Oui)
? 12-o (Oui)-webkit ?

[1] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Notes relatives à Quantum (Firefox)

  • Gecko possède un bug qui fait que lorsqu'on anime un élément en dehors de l'écran pour le faire apparaître à l'écran après une durée donnée, il n'effectue pas de repaint sur certaines plateformes (par exemple Windows, cf. (bug 1383239)). Ce problème a été corrigé avec le nouveau moteur de rendu CSS, Stylo, prévu pour Firefox 57.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : Mr21, SphinxKnight, teoli, Sebastianz, FredB, tregagnon
 Dernière mise à jour par : Mr21,