Transition-delay - Propriété CSS

Schéma de la syntaxe de transition-delay.

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

• duration est une valeur numérique suivie d'une des unités de durée.
• La syntaxe peut être répétée plusieurs fois, séparées par des virgules.

Description de la propriété transition-delay.

Définit un temps d'attente avant que la transition ne commence.

Une transition consiste à faire évoluer progressivement une propriété d'une valeur à une autre. La transition s'active lorsque une nouvelle valeur est affectée à la propriété. Pour une présentation générale des transitions, reportez-vous à la propriété résumée transition.

Le temps d'attente défini par transition-delay s'ajoute à la durée normale de la transition. Il ne réduit donc pas cette dernière.

Valeurs pour transition-delay.

• transition-delay: 2s;

  L'effet de transition démarre après la durée indiquée. Un nombre positif ou négatif, suivi d'une des unités de durée.

  La valeur par défaut est 0 : la transition démarre dès que la propriété animée est modifiée.

  Si la durée est négative, l'effet de transition commence immédiatement mais la première partie de la transition n'est pas animée. Si cette valeur négative est plus grande que la durée de la transition, l'effet de transition est annulé.

• transition-delay: 2s, 1s;

  Lorsque plusieurs transitions ont été définies, il est possible de leur appliquer des délais différents en énumérant les valeurs, séparées par des virgules.

  Reportez-vous à la page transition pour plus d'informations sur les transitions multiples.

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

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

Exemple d'animation de transition-delay.

Comme toutes les propriétés relatives aux animations ou aux transitions, transition-delay ne peut pas être animée.

Exemple interactif avec la propriété transition-delay.

Une transition de 2 secondes a été définie sur la marge gauche du bloc bleu ci-dessous. Le simulateur vous permet d'ajuster la valeur de transition-delay. Le bouton "Start" modifie la valeur de la marge gauche, ce qui active la transition.

Vous pouvez tenter une durée négative pour le temps d'attente, mais en restant au dessus de -2s, ou sinon la transition ne se fait pas du tout.

Compatibilité des navigateurs avec transition-delay.

Les transitions et la propriété transition-delay sont bien prises en charge par les navigateurs actuels.

1

Support des
transitions

2

Propriété
transition-delay

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Opéra mini

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

Caniuse

Caniuse

Histoire de la propriété transition-delay.

• Module CSS - Les transition - Niveau 1

  Première spécification concernant les transitions, et définition des propriétés correspondantes.
  

  20 Mars 2009

  Document de travail.

  

  

  

• Module CSS - Les transitions - Niveau 2

  Pas de changement concernant la propriété transition-delay.
  

  05 Septembre 2023

  Document de travail.

  

  

  

Voir aussi : les transitions.

Les transitions sont décrites dans la spécification CSS Transitions. Pour faciliter vos recherches, voici les propriétés relatives aux transitions :

Propriétés :