-
Notifications
You must be signed in to change notification settings - Fork 8.1k
/
index.md
129 lines (93 loc) · 3.4 KB
/
index.md
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
---
title: transition-delay
slug: Web/CSS/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)