transition-duration

La propriété transition-duration définit le nombre de secondes ou de millisecondes que doit durer une animation. La valeur par défaut, 0s, indique qu'il n'y aura aucune animation.

Il est possible de définir plusieurs durées, chacune sera appliquée à la propriété correspondante listée par transition-property (qui agit comme un index des propriétés impactées par les animations). S'il y a moins de durées que d'éléments dans cette liste, l'agent utilisateur dupliquera les durées. S'il y a trop de durées, la liste sera tronquée. Dans les deux cas, la déclaration CSS sera considérée comme valide.

Syntaxe

/* Valeurs temporelles */
/* Type <time> */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

/* Valeurs globales */
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;

Valeurs

<time>
Une valeur <time> qui définit la durée que doit prendre l'animation pour changer la valeur d'une propriété (entre l'ancienne valeur et la nouvelle). Une durée de 0s qu'aucune transition ne sera appliquée et que le passage d'un état à l'autre sera instantanné. Si la valeur utilisée est négative, la déclaration sera considérée comme invalide.

Syntaxe formelle

Exemples

transition-duration: 0.5s

transition-duration: 1s

transition-duration: 2s

transition-duration: 4s

Spécifications

Spécification État Commentaires
CSS Transitions
La définition de 'transition-duration' dans cette spécification.
Version de travail Définition initiale.

Valeur initiale0s
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi