CSS - Propriété transition-duration

Description de la propriété transition-duration.

Définit la durée de la transition. Cette valeur doit obligatoirement être définie à une valeur supérieure à 0 secondes pour que l'effet de transition soit visible.

Pour plus d'informations sur les transitions en général, reportez-vous à la propriété raccourcie transition.

Syntaxes pour transition-duration.

• transition-duration: 5s;

  La transition se déroulera sur une durée totale de la valeur indiquée. C'est un nombre positif suivi d'une unité de durée (voir les unités de temps en CSS). La valeur par défaut est 0, ce qui annule l'effet de la transition.

• transition-duration: 5s,3s;

  Plusieurs valeurs peuvent être énoncées, séparées par des virgules. Cette syntaxe est utilisable lorsque plusieurs transitions sont définies : voir la page sur les transitions multiples.

• transition-duration: initial;

  La valeur initiale est 0.

• transition-duration: unset; transition-duration: inherit;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.

Voir aussi...

Animation - Propriétés.

• animation : Paramètres d'animation.
• animation-delay : Temps d'attente avant le démarrage de l'animation.
• animation-direction : Sens de l'animation (normal ou inverse).
• animation-duration : Durée d'une animation.
• animation-fill-mode : Style de remplacement lorsque l'animation n'est pas en cours.
• animation-iteration-count : Nombre de répétition de l'animation.
• animation-name : Nom d'une animation.
• animation-play-state : État de l'animation (en cours ou en pause).
• animation-timing-function : Fonction non linéaire définissant la progression d'une animation.
• transition : Effet d'animation simple.
• transition-delay : Temps d'attente avant que la transition ne commence.
• transition-property : Propriété sur laquelle doit s'appliquer la transition.
• transition-timing-function : Fonction définissant une transition non linéaire.

Animation - Directives.

• @keyframes : Définition d'une animation.

Animation - Fonctions.

• cubic-bezier() : Détermine une progression non linéaire pour les animations.
• steps() : Définit une animation saccadée, pas par pas.