transition-delay - Propriété CSS
Résumé des caractéristiques de la propriété transition-delay
0s
transition-delay
ne peut pas être animée.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:
;
- 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.
Traitement des transitions par les navigateurs (compatibilité).
Les transitions et la propriété transition-delay
sont bien prises en charge par les navigateurs actuels.
transition-delay
.
transition-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 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.