1 files changed, 146 insertions, 0 deletions
diff --git a/files/fr/web/css/transition-duration/index.md b/files/fr/web/css/transition-duration/index.md
new file mode 100644
index 0000000000..d24b28832a
--- /dev/null
+++ b/files/fr/web/css/transition-duration/index.md
@@ -0,0 +1,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 &lt;time&gt; */
+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>&lt;time&gt;</code></dt>
+ <dd>Une valeur {{cssxref("&lt;time&gt;")}} 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">
+  &lt;div class="box duration-1"&gt;0,5 secondes&lt;/div&gt;
+
+  &lt;div class="box duration-2"&gt;2 secondes&lt;/div&gt;
+
+  &lt;div class="box duration-3"&gt;4 secondes&lt;/div&gt;
+
+  &lt;button id="change"&gt;Changer&lt;/button&gt;
+</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>