transition-delay

La propriété transition-delay indique la durée à attendre avant de débuter la transition qui s'applique pour un changement de propriété.

Cette durée peut être nulle, positive ou négative :

Une valeur de 0s ou 0ms indique que l'animation correspondante démarrera immédiatement lorsque la valeur sera modifiée.
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é).

Il est possible d'indiquer plusieurs valeurs d'attente. Chaque valeur sera appliquée à la propriété correspondante donnée par la liste transition-property (qui agit comme un index des propriétés concernées par les transitions). S'il n'y a pas suffisamment de valeurs dans cette liste, les valeurs précédentes seront répétées jusqu'à ce qu'il y en ait suffisamment. S'il y a plus de valeurs d'attente que d'éléments dans transition-property, la liste est simplement tronquée. Dans les deux cas, la déclaration CSS est considérée comme valide.

Syntaxe

/* Valeurs temporelles */
/* Type <time> */
transition-delay: 3s;
transition-delay: 2s, 4ms;

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

Valeurs

<time>: Une valeur <time> qui indique la durée à attendre avant de démarrer l'effet de transition déclenché par le changement de valeur d'une propriété.

Syntaxe formelle

<time>#

Exemples

transition-delay: 0.5s

 <div class="parent">
  <div class="box">Lorem</div>
</div>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:0.5s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
     -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:0.5s;
    transition-timing-function: linear;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

transition-delay: 1s

 <div class="parent">
  <div class="box">Lorem</div>
</div>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
     -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:1s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:1s;
    transition-timing-function: linear;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

transition-delay: 2s

 <div class="parent">
  <div class="box">Lorem</div>
</div>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:2s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:2s;
    transition-timing-function: linear;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

transition-delay: 4s

 <div class="parent">
  <div class="box">Lorem</div>
</div>

.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:4s;
    transition-timing-function: ease-in-out;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:4s;
    transition-timing-function: ease-in-out;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

Spécifications

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

Valeur initiale	`0s`
Applicabilité	tous les éléments, ainsi que les pseudo-elements `::before` et `::after`
Héritée	non
Média	interactif
Valeur calculée	comme spécifié
Type d'animation	discrète
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`transition-delay`	Chrome Support complet 26 Support complet 26 Support complet 1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Edge Support complet 12 Support complet 12 Support complet 12 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Firefox Support complet 16 Support complet 16 Support complet 4 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz- Support complet 49 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 44 Préfixée Désactivée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Désactivée From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Support complet 10 Support complet 10 Support complet 10 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -ms-	Opera Support complet 12.1 Support complet 12.1 Support complet 15 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Aucun support 11.6 — 15 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -o-	Safari Support complet 9 Support complet 9 Support complet 4 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	WebView Android Support complet ≤37 Support complet ≤37 Support complet 2 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Chrome Android Support complet 26 Support complet 26 Support complet 18 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Firefox Android Support complet 16 Support complet 16 Support complet 4 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz- Support complet 49 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 44 Préfixée Désactivée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Désactivée From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Support complet 12.1 Support complet 12.1 Support complet 14 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Aucun support 12 — 14 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -o-	Safari iOS Support complet 9 Support complet 9 Support complet 2 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Samsung Internet Android Support complet 1.5 Support complet 1.5 Support complet 1.0 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-

Légende

Support complet: Support complet
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.: Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.: Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Utiliser les transitions CSS
L'API TransitionEvent