transition-duration

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2015.

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.

Exemple interactif

transition-duration: 500ms;transition-property: margin-right;

transition-duration: 2s;transition-property: background-color;

transition-duration: 2s;transition-property: margin-right, color;

transition-duration: 3s, 1s;transition-property: margin-right, color;

<section>  <div>Hover to see<br />the transition.</div></section>

#example-element {  background-color: #e4f0f5;  color: #000;  padding: 1rem;  border-radius: 0.5rem;  font: 1em monospace;  width: 100%;  transition: margin-right 2s;}#default-example:hover > #example-element {  background-color: #909;  color: #fff;  margin-right: 40%;}

Il est possible de définir plusieurs durées, chacune sera appliquée à la propriété correspondante listée partransition-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

css

/* 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 de0s 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.

Définition formelle

Valeur initiale	`0s`
Applicabilité	tous les éléments, ainsi que lespseudo-éléments `::before` et`::after`
Héritée	non
Valeur calculée	comme défini
Type d'animation	Non animable

Syntaxe formelle

transition-duration =
<time [0s,∞]>#

Exemples

Exemple illustrant différentes durées

HTML

html

<div>0,5 secondes</div><div>2 secondes</div><div>4 secondes</div><button>Changer</button>

CSS

css

.box {  margin: 20px;  padding: 10px;  display: inline-block;  width: 100px;  height: 100px;  background-color: red;  font-size: 18px;  transition-property: background-color font-size transform color;  transition-timing-function: ease-in-out;}.transformed-state {  transform: rotate(270deg);  background-color: blue;  color: yellow;  font-size: 12px;  transition-property: background-color font-size transform color;  transition-timing-function: ease-in-out;}.duration-1 {  transition-duration: 0.5s;}.duration-2 {  transition-duration: 2s;}.duration-3 {  transition-duration: 4s;}

JavaScript

function change() {  const elements = document.querySelectorAll("div.box");  for (let element of elements) {    element.classList.toggle("transformed-state");  }}const changeButton = document.querySelector("#change");changeButton.addEventListener("click", change);