1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: transition-delay
slug: Web/CSS/transition-delay
translation_of: Web/CSS/transition-delay
browser-compat: css.properties.transition-delay
---
{{CSSRef}}
La propriété CSS **`transition-delay`** indique la durée à attendre avant de débuter [la transition](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) qui s'applique pour un changement de propriété.
{{EmbedInteractiveExample("pages/css/transition-delay.html")}}
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.
- 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`](/fr/docs/Web/CSS/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`](/fr/docs/Web/CSS/transition-property), la liste est simplement tronquée. Dans les deux cas, la déclaration CSS est considérée comme valide.
## Syntaxe
```css
/* Valeurs temporelles */
/* Type <time> */
transition-delay: 3s;
transition-delay: 2s, 4ms;
/* Valeurs globales */
transition-delay: inherit;
transition-delay: initial;
transition-delay: revert;
transition-delay: unset;
```
### Valeurs
- [`<time>`](/fr/docs/Web/CSS/time)
- : Une valeur [`<time>`](/fr/docs/Web/CSS/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é.
## Définition formelle
{{CSSInfo}}
## Syntaxe formelle
{{csssyntax}}
## Exemples
### Exemple illustrant différentes temporisations
#### HTML
```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
```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
```js
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
{{EmbedLiveSample("",275,200)}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
- L'API [`TransitionEvent`](/fr/docs/Web/API/TransitionEvent)
|
