transition-delay
Baseline
Large disponibilité
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é CSS transition-delay indique la durée à attendre avant de débuter la transition qui s'applique pour un changement de propriété.
Exemple interactif
transition-delay: 250ms;
transition-property: margin-right;
transition-delay: 1s;
transition-property: background-color;
transition-delay: 1s;
transition-property: margin-right, color;
transition-delay: 1s, 250ms;
transition-property: margin-right, color;
<section id="default-example">
<div id="example-element">Survolez pour voir<br />la transition.</div>
</section>
#example-element {
background-color: #e4f0f5;
color: black;
padding: 1rem;
border-radius: 0.5rem;
font: 1em monospace;
width: 100%;
transition: margin-right 2s;
}
#default-example:hover > #example-element {
background-color: #990099;
color: white;
margin-right: 40%;
}
Cette durée peut être nulle, positive ou négative :
- Une valeur de
0s(ou0ms) indique que l'animation correspondante démarrera immédiatement. - Une valeur positive permettra d'attendre avant de démarrer l'effet de transition.
- Une valeur négative lancera l'animation immédiatement mais à partir d'un état intermédiaire (comme si la transition avait déjà commencé).
Vous pouvez définir plusieurs délais, ce qui est utile lors de la transition de plusieurs propriétés. Chaque délai sera appliqué à la propriété correspondante définie par la propriété transition-property, qui agit comme une liste principale. S'il y a moins de délais définis que dans la liste principale, la liste des valeurs de délai sera répétée jusqu'à ce qu'il y en ait suffisamment. S'il y a plus de délais, la liste des valeurs de délai sera tronquée pour correspondre au nombre de propriétés. Dans les deux cas, la déclaration CSS reste valide.
Syntaxe
/* Valeurs de type <time> */
transition-delay: 3s;
transition-delay: 2s, 4ms;
/* Valeurs globales */
transition-delay: inherit;
transition-delay: initial;
transition-delay: revert;
transition-delay: revert-layer;
transition-delay: unset;
Valeurs
<time>-
Indique la durée à attendre entre le changement de valeur d'une propriété et le début de l'effet de transition.
Définition formelle
| Valeur initiale | 0s |
|---|---|
| Applicabilité | tous les éléments, ainsi que les pseudo-éléments ::before et ::after |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | Non animable |
Syntaxe formelle
transition-delay =
<time>#
Exemples
Exemple illustrant différentes temporisations
HTML
<div class="box delay-1">0,5 secondes</div>
<div class="box delay-2">2 secondes</div>
<div class="box delay-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;
transition-duration: 3s;
}
.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;
transition-duration: 3s;
}
.delay-1 {
transition-delay: 0.5s;
}
.delay-2 {
transition-delay: 2s;
}
.delay-3 {
transition-delay: 4s;
}
JavaScript
function change() {
const elements = document.querySelectorAll("div.box");
for (const element of elements) {
element.classList.toggle("transformed-state");
}
}
const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);
Résultat
Spécifications
| Spécification |
|---|
| CSS Transitions Module Level 1 # transition-delay-property |
Compatibilité des navigateurs
Voir aussi
- Utiliser les transitions CSS
- L'interface API
TransitionEvent