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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
title: transition-duration
slug: Web/CSS/transition-duration
tags:
- CSS
- Propriété
- Reference
- Transitions
translation_of: Web/CSS/transition-duration
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>transition-duration</code></strong> définit le nombre de secondes ou de millisecondes que doit durer une animation. La valeur par défaut, <code>0s</code>, indique qu'il n'y aura aucune animation.</p>
<div>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</div>
<p>Il est possible de définir plusieurs durées, chacune sera appliquée à la propriété correspondante listée par {{cssxref("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.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code><time></code></dt>
<dd>Une valeur {{cssxref("<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 de <code>0s</code> 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.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="exemple_illustrant_differentes_durees">Exemple illustrant différentes durées</h3>
<h4>HTML</h4>
<pre class="brush: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>
</pre>
<h4>CSS</h4>
<pre class="brush: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;
}
</pre>
<h4>JavaScript</h4>
<pre class="brush: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);
</pre>
<h4>Résultat</h4>
<div>{{EmbedLiveSample("exemple_illustrant_differentes_durees",275,200)}}</div>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#transition-duration', 'transition-duration')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.transition-duration")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Utiliser les transitions CSS</a></li>
<li>{{domxref("TransitionEvent")}}</li>
</ul>
|
