transition-duration
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 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
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 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 les pseudo-elements ::before et ::after |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | Not animatable |
Syntaxe formelle
transition-duration =
<time [0s,∞]>#
Exemples
Exemple illustrant différentes durées
HTML
<div class="box duration-1">0,5 secondes</div>
<div class="box duration-2">2 secondes</div>
<div class="box duration-3">4 secondes</div>
<button id="change">Changer</button>
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);
Résultat
Spécifications
Specification |
---|
CSS Transitions # transition-duration-property |
Compatibilité des navigateurs
BCD tables only load in the browser