Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

transition-delay - Propriété CSS

transition-delay

Résumé des caractéristiques de la propriété transition-delay

Description rapide
Définit le temps d'attente avant que la transition ne commence.
Statut
Standard
S'applique à
Tous les éléments.
Type de valeur
Durée
Pourcentages
Ne s'appliquent pas.
Valeur initiale
0s
Héritée par défaut
Non
Type d'animation
Étant elle même un des paramètres d'une animation, la propriété transition-delay ne peut pas être animée.
Module W3C
Module CSS - Les transitions
Références (W3C)
Statut du document:: WD (document de travail)

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.

Syntaxes pour transition-delay.

t est la durée d'attente.
En cas d'animations multiples cette valeur peut être répétée en séparant les occurrences par une virgule.

transition-delay:
 t t , ,
;
  • 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 unité de temps (voir les unités CSS 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; transition-delay: inherit; transition-delay: revert; transition-delay: revert-layer; transition-delay: unset;

    La valeur initiale est : 0s.

Animation de la propriété transition-delay.

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

Simulateur.

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.

transition-delay :

Traitement des transitions par les navigateurs (compatibilité).

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

Colonne 1
Prise en charge par les navigateurs des effets de transition en général .
Colonne 2
Support de la propriété transition-delay.
1
Transitions
2
transition-delay
Estimation de la prise en charge en pourcentage du parc actuel.
98%
97%

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 transition-delay.

Les spécifications CSS éditées par le W3C sont organisées en modules. transition-delay fait partie du Module CSS - Les transitions (CSS Transitions). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Effet d'animation simple.
Définit la durée d'une transition.
Définit la ou les propriétés sur lesquelles doit s'appliquer une transition.
Propriété définissant la fonction d'accélération à utiliser pendant une transition.