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. Sauf si transition-delay reçoit une valeur négative, dans ce cas l'animation n'est pas jouée entièrement et elle s'exécute sur une durée plus courte.

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 les transitions multiples 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 "Démarrer la transition" 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.

• Les transition en CSS - Niveau 1

  Normalement, quand une propriété change de valeur, sa restitution à l'écran est immédiate. Ce module de spécification décrit comment faire évoluer des propriétés progressivement d'une valeur à l'autre dans un temps donné. Autrement dit, comment passer d'un état à un autre progressivement.
  Il y a cependant besoin d'un événement extérieur pour déclencher le changement de valeur des propriétés (code Javascript, action de l'utilisateur, etc.). C'est en ce sens que les transitions diffèrent des animations, qui, elles, peuvent s'exécuter indépendamment de toute action extérieure.

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

  20 Mars 2009

  Document de travail.

  

  

  

• Les transitions en CSS - Niveau 2

  Le niveau 2 de la spécification sur les transitions ajoute la possibilité d'appliquer une transition sur une propriété discrète.
  Une nouvelle directive @starting-style permet de définir les valeurs de départ pour les valeurs des propriétés . Il est maintenant possible d'appliquer une transition sur des éléments qui passent de l'état invisible à l'état visible.

  Concernant transition-delay. 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 les transitions en CSS. Pour faciliter vos recherches, voici les propriétés relatives aux transitions :

Propriétés :

Directives :