unslug fr: move

10 files changed, 501 insertions, 407 deletions

diff --git a/files/fr/web/api/htmlelement/accesskey/index.html b/files/fr/web/api/htmlelement/accesskey/index.html
new file mode 100644
index 0000000000..2d84dd6dae
--- /dev/null
+++ b/files/fr/web/api/htmlelement/accesskey/index.html
@@ -0,0 +1,22 @@
+---
+title: Element.accessKey
+slug: Web/API/Element/accessKey
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriété
+  - Raccourcis clavier
+  - Reference
+translation_of: Web/API/HTMLElement/accessKey
+translation_of_original: Web/API/Element/accessKey
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div> </div>
+
+<p>La propriété <font face="Consolas, Monaco, Andale Mono, monospace"><strong>Element.accessKey</strong></font> définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>Element.accessKey</code><strong> </strong>est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme <kbd>Alt</kbd> + accesskey).</p>
+</div>
diff --git a/files/fr/web/api/htmlelement/animationend_event/index.html b/files/fr/web/api/htmlelement/animationend_event/index.html
new file mode 100644
index 0000000000..1fdeba6e63
--- /dev/null
+++ b/files/fr/web/api/htmlelement/animationend_event/index.html
@@ -0,0 +1,81 @@
+---
+title: animationend
+slug: Web/Events/animationend
+translation_of: Web/API/HTMLElement/animationend_event
+---
+<p>L'événement <code><strong>animationend</strong> est déclenché quand une animation CSS est terminée.</code></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">AnimationEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element, Window</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-il possible d'annuler l'événement?</td>
+  </tr>
+  <tr>
+   <td><code>animationName</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le nom de la propriété CSS associéee à la transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{ReadOnlyInline}}</td>
+   <td>Float</td>
+   <td>Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("animationstart")}}</li>
+ <li>{{Event("animationend")}}</li>
+ <li>{{Event("animationiteration")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/animationiteration_event/index.html b/files/fr/web/api/htmlelement/animationiteration_event/index.html
new file mode 100644
index 0000000000..df8e3d89be
--- /dev/null
+++ b/files/fr/web/api/htmlelement/animationiteration_event/index.html
@@ -0,0 +1,83 @@
+---
+title: animationiteration
+slug: Web/Events/animationiteration
+translation_of: Web/API/HTMLElement/animationiteration_event
+---
+<p>L'événement<strong> </strong><code><strong> animationiteration</strong> est déclenché lorsqu'une itération d'une animation se termine. Cet événement ne se produit pas pour les animations avec <em>animation-iteration-count</em> valant 1.</code></p>
+
+<h2 id="informations_générales">informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">AnimationEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Synchronisme</dt>
+ <dd style="margin: 0 0 0 120px;">synchronous</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-il possible d'annuler l'événement?</td>
+  </tr>
+  <tr>
+   <td><code>animationName</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le nom de la propriété CSS associéee à la transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{ReadOnlyInline}}</td>
+   <td>Float</td>
+   <td>Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("animationstart")}}</li>
+ <li>{{Event("animationend")}}</li>
+ <li>{{Event("animationiteration")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="new" href="https://developer.mozilla.org/fr/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/animationstart_event/index.html b/files/fr/web/api/htmlelement/animationstart_event/index.html
new file mode 100644
index 0000000000..407bcb6dea
--- /dev/null
+++ b/files/fr/web/api/htmlelement/animationstart_event/index.html
@@ -0,0 +1,81 @@
+---
+title: animationstart
+slug: Web/Events/animationstart
+translation_of: Web/API/HTMLElement/animationstart_event
+---
+<p>L'événement <strong><code>animationstart </code></strong><code>est déclenché quand une animation CSS a commencé. Si <em>animation-delay</em> est défini alors le déclenchement se fera une fois le delai expiré. Un délai négatif causera un déclenchement de l'événement avec un </code><em>elapsedTime </em>équivalent à la valeur absolue du délai.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">AnimationEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-il possible d'annuler l'événement?</td>
+  </tr>
+  <tr>
+   <td><code>animationName</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le nom de la propriété CSS associéee à la transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{ReadOnlyInline}}</td>
+   <td>Float</td>
+   <td>Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("animationstart")}}</li>
+ <li>{{Event("animationend")}}</li>
+ <li>{{Event("animationiteration")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="new" href="https://developer.mozilla.org/fr/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/dataset/index.html b/files/fr/web/api/htmlelement/dataset/index.html
deleted file mode 100644
index fa7ece8acc..0000000000
--- a/files/fr/web/api/htmlelement/dataset/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: HTMLElement.dataset
-slug: Web/API/HTMLElement/dataset
-tags:
-  - API
-  - HTML DOM
-  - HTMLElement
-  - Propriété
-  - Référence(2)
-  - dataset
-translation_of: Web/API/HTMLOrForeignElement/dataset
----
-<p>{{ APIRef }}</p>
-
-<p>La propriété <code><strong>HTMLElement.dataset</strong></code> fournit un accès en mode lecture et écriture, à tous les <a href="/fr/docs/Web/HTML/Attributs_globaux/data-*" title="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_globaux/data-*">attributs de données sur mesure</a> (<em>data-*</em>) définis sur l'élément. C'est un <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">tableau associatif de DOMString</a>, qui associe à chaque nom d'attribut de données sur mesure la valeur qu'il contient.</p>
-
-<p>Le nom d'un attribut de données sur mesure commence par <code>data-</code>. Il ne doit contenir que des lettres, des nombres et les caractères suivants : tiret (<code>-</code>), point (<code>.</code>), deux-points (<code>:</code>), tiret bas (<code>_</code>). De plus, il ne doit pas contenir des lettres majuscules ASCII (<code>A</code> à <code>Z</code>).</p>
-
-<p>Un nom d'attribut de données sur mesure est transformé en clef pour l'entrée de la {{ domxref("DOMStringMap") }} avec les règles suivantes :</p>
-
-<ul>
- <li>le préfixe <code>data-</code> est enlevé (y compris le tiret) ;</li>
- <li>pour tout tiret (<code>U+002D</code>) suivi par une <span style="line-height: 1.5;"> lettre minuscule ASCII</span><code> a</code><span style="line-height: 1.5;"> à </span><code>z</code><span style="line-height: 1.5;">, le tiret est enlevé et la lettre est transformée en la majuscule correspondante ;</span></li>
- <li>les autres caractères (y compris les autres tirets) ne sont pas modifiés.</li>
-</ul>
-
-<p>La transformation opposée, qui associe un nom d'attribut à une clef, utilise les règles suivantes :</p>
-
-<ul>
- <li>Restriction : Aucun tiret ne doit être immédiatement suivi d'une lettre minuscule ASCII <code>a</code> à <code>z</code> (avant la transformation) ;</li>
- <li>un préfixe <code>data-</code> est ajouté ;</li>
- <li>toute lettre majuscule ASCII <code>A</code> à <code>Z</code> est transformée en un tiret suivi de la minuscule correspondante ;</li>
- <li>les autres caractères ne sont pas modifiés.</li>
-</ul>
-
-<p>La restriction dans les règles ci-dessus garantit que les deux transformations sont bien l'inverse l'une de l'autre.</p>
-
-<p>Par exemple, l'attribut nommé <code>data-abc-def</code> correspond à la clef <code>abcDef</code>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>chaîne</em> = <em>element</em>.dataset.<em>nomEnCamelCase</em>;
-<em>element.</em>dataset.<em>nomEnCamelCase</em> = <em>chaîne</em>;</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">&lt;div id="utilisateur" data-id="1234567890" data-utilisateur="Monsieur Tartempion" data-date-de-naissance&gt;Monsieur Tartempion
-&lt;/div&gt;
-
-var el = document.querySelector('#utilisateur');
-
-// el.id == 'utilisateur'
-// el.dataset.id === '1234567890'
-// el.dataset.utilisateur === 'Monsieur Tartempion'
-// el.dataset.dateDeNaissance === ''
-
-el.dataset.dateDeNaissance = '1960-10-03'; // renseigne la date de naissance.
-
-// 'unAttributDeDonnees' in el.dataset === false
-
-el.dataset.unAttributDeDonnees = 'mes données';
-// 'unAttributDeDonnees' in el.dataset === true
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis le dernier instantané (snapshot), {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Instantané de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Instantané de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.HTMLElement.dataset")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La classe des attributs globaux HTML <a href="/fr/docs/Web/HTML/Attributs_globaux/data-*"><strong>data-*</strong></a>.</li>
-</ul>
diff --git a/files/fr/web/api/htmlelement/focus/index.html b/files/fr/web/api/htmlelement/focus/index.html
deleted file mode 100644
index 3659a5a75b..0000000000
--- a/files/fr/web/api/htmlelement/focus/index.html
+++ /dev/null
@@ -1,223 +0,0 @@
----
-title: HTMLElement.focus()
-slug: Web/API/HTMLElement/focus
-tags:
-  - API
-  - HTML DOM
-  - HTMLElement
-translation_of: Web/API/HTMLOrForeignElement/focus
----
-<div>{{ APIRef("HTML DOM") }}</div>
-
-<p>La méthode <strong><code>HTMLElement.focus()</code></strong> donne le focus à l'élément spécifié, s'il peut prendre le focus.</p>
-
-<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Syntaxe</h2>
-
-<pre class="syntaxbox">element.focus();
-element.focus(focusOption); // Paramètre objet</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>focusOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
- <dd>Est un objet ayant les propriétés suivantes:</dd>
- <dd>
- <dl>
-  <dt><code>preventScroll</code> {{optional_inline}}</dt>
-  <dd>Est une valeur <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>:
-  <ul>
-   <li>Si <code>false</code>, la méthode fera défiler la page pour que l'élément soit visible à l'écran.</li>
-   <li>Si <code>true</code>,  la méthode ne fera PAS défiler la page pour que l'élément soit visible à l'écran.</li>
-  </ul>
-  </dd>
- </dl>
- </dd>
-</dl>
-
-<h2 id="Specification" name="Specification">Exemples</h2>
-
-<h3 id="Focus_on_a_text_field" name="Focus_on_a_text_field">Donner le focus à un champ texte</h3>
-
-<h4 id="JavaScript">JavaScript</h4>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js">focusMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myTextField"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myTextField<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"Champ texte</span>.<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Cliquez-moi pour donner le focus au champ texte!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p>
-
-<h3 id="Focus_on_a_button" name="Focus_on_a_button">Donner le focus à un bouton</h3>
-
-<h4 id="JavaScript_2">JavaScript</h4>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js">focusMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myButton"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myButton<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez</span></span>!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez-moi pour donner le focus au bouton</span></span>!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p>
-
-<h3 id="Focus_prevent_scroll" name="Focus_prevent_scroll">Focus avec option</h3>
-
-<h4 id="JavaScript_3">JavaScript</h4>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js">focusScrollMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myButton"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">{</span>preventScroll<span class="punctuation token">:</span><span class="keyword token">false</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-focusNoScrollMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocusWithoutScrolling</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myButton"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">{</span>preventScroll<span class="punctuation token">:</span><span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
-
-<h4 id="HTML_3">HTML</h4>
-
-<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusScrollMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Cliquez-moi pour donner le focus au bouton!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusNoScrollMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Cliquez-moi pour donner le focus au bouton sans défilement!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>container<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">1000</span>px<span class="punctuation token">;</span> <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">1000</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myButton<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">500</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez</span></span>!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
-
-<h4 id="Résultat_3">Résultat</h4>
-
-<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p>
-
-<h2 id="Specification" name="Specification">Spécification</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Si vous appelez <code>HTMLElement.focus()</code> à partir d'un gestionnaire d'événement mousedown, vous devez appeler <code>event.preventDefault()</code> pour empêcher le focus de quitter l'<code>HTMLElement</code>.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table>
- <tbody>
-  <tr>
-   <th>Fonctionnalité</th>
-   <th>Chrome</th>
-   <th>Firefox</th>
-   <th>Edge</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Support basique</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>focusOptions</code></td>
-   <td>{{CompatChrome(64)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatOperaMobile(51)}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table>
- <tbody>
-  <tr>
-   <th>Fonctionnalité</th>
-   <th>Android Webview</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile</th>
-   <th>Edge mobile</th>
-   <th>IE mobile</th>
-   <th>Opera Android</th>
-   <th>Safari iOS</th>
-  </tr>
-  <tr>
-   <td>Support basique</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>focusOptions</code></td>
-   <td>{{CompatChrome(64)}}</td>
-   <td>{{CompatChrome(64)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatOperaMobile(51)}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La méthode DOM {{domxref("HTMLElement.blur()")}} pour retirer le focus.</li>
- <li>{{domxref('document.activeElement')}} pour savoir quel élément a actuellement le focus.</li>
-</ul>
diff --git a/files/fr/web/api/htmlelement/innertext/index.html b/files/fr/web/api/htmlelement/innertext/index.html
new file mode 100644
index 0000000000..6b9d530411
--- /dev/null
+++ b/files/fr/web/api/htmlelement/innertext/index.html
@@ -0,0 +1,42 @@
+---
+title: Node.innerText
+slug: Web/API/Node/innerText
+translation_of: Web/API/HTMLElement/innerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p><code><strong>Node.innerText</strong></code> est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier.</p>
+
+<p>{{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Introduction basée sur le <a href="https://github.com/rocallahan/innerText-spec" lang="en">brouillon de spécification de innerText</a>. Voir <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> et <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> pour l’histoire.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.innerText")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/style/index.html b/files/fr/web/api/htmlelement/style/index.html
deleted file mode 100644
index 85a19bb89a..0000000000
--- a/files/fr/web/api/htmlelement/style/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: HTMLElement.style
-slug: Web/API/HTMLElement/style
-tags:
-  - DOM
-  - Style
-translation_of: Web/API/ElementCSSInlineStyle/style
----
-<p>{{ APIRef("HTML DOM") }}</p>
-
-<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
-
-<p>Renvoie un objet représentant l'attribut <code>style</code> de l'élément.</p>
-
-<h2 id="Exemple" name="Exemple">Exemple</h2>
-
-<pre class="eval">var div = document.getElementById("div1");
-div.style.marginTop = ".25cm";
-</pre>
-
-<h3 id="Notes" name="Notes">Notes</h3>
-
-<p>Étant donné que la propriété <code>style</code> d'un élément représente sa déclaration de style en-ligne, qui se trouve dans son attribut <code>style</code> et qui a la priorité la plus haute dans la cascade CSS, elle est utile pour définir un style pour un élément particulier.</p>
-
-<p>Cependant, elle n'est pas utile pour connaître le style de l'élément en général, puisqu'elle ne représente que les déclarations CSS définies dans l'attribut <code>style</code> de l'élément, et pas celles qui viennent d'autres règles de style, comme celles qui peuvent se trouver dans la section <code>&lt;head&gt;</code> ou des feuilles de style externes.</p>
-
-<p>Pour obtenir les valeurs de toutes les propriétés CSS pour un élément, vous devriez plutôt utiliser <code><a href="/fr/DOM/window.getComputedStyle" title="fr/DOM/window.getComputedStyle">window.getComputedStyle</a></code>.</p>
-
-<p>Consultez la <a href="/fr/docs/DOM/CSS" title="fr/DOM/CSS">liste des propriétés CSS DOM</a> pour une liste des propriétés CSS accessibles depuis le DOM. Vous y trouverez quelques notes supplémentaires concernant l'utilisation de la propriété <code>style</code> pour styler des éléments dans le DOM.</p>
-
-<p>Il est généralement préférable d'utiliser la propriété <code>style</code> plutôt que <code>elt.setAttribute('style', '...')</code> depuis un script, étant donné que l'utilisation de la propriété <code>style</code> n'écrasera pas les autres propriétés CSS qui peuvent avoir été spécifiées dans l'attribut <code>style</code>.</p>
-
-<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
-
-<ul>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule-style">DOM Level 2 Core : style</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/style/css.html#CSS-CSSStyleRule-style">traduction en français</a> (non normative)</small></li>
-</ul>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
-
-<p>{{Compat("api.HTMLElement.style")}}</p>
-
-<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><span id="1236997045923S" style="display: none;"> </span>Voir aussi</h2>
-
-<ul>
- <li><a class="internal" href="/en/CSS/CSS_Reference" title="en/CSS/CSS_Reference">Liste des propriétés CSS DOM</a> (en)</li>
-</ul>
-
-<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Lien Externe</h2>
-
-<ul>
- <li><a class="external" href="http://www.w3schools.com/HTMLDOM/dom_obj_style.asp" title="http://www.w3schools.com/HTMLDOM/dom_obj_style.asp">HTML DOM Style Object</a> — W3Schools.com (en)</li>
-</ul>
-
-<p>{{ languages( { "en": "en/DOM/element.style", "ja": "ja/DOM/element.style", "pl": "pl/DOM/element.style" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/tabindex/index.html b/files/fr/web/api/htmlelement/tabindex/index.html
deleted file mode 100644
index b2dd8ca956..0000000000
--- a/files/fr/web/api/htmlelement/tabindex/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: element.tabIndex
-slug: Web/API/HTMLElement/tabIndex
-tags:
-  - Référence_du_DOM_Gecko
-translation_of: Web/API/HTMLOrForeignElement/tabIndex
----
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Obtient ou définit l'ordre de tabulation de l'élément courant.</p>
-<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
-<pre class="eval">element.tabIndex = <em>iIndex</em>;
-</pre>
-<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
-<ul>
- <li><code>iIndex</code> est un nombre.</li>
-</ul>
-<h3 id="Exemple" name="Exemple">Exemple</h3>
-<pre>b1 = document.getElementById("button1");
-b1.tabIndex = 1;
-</pre>
-<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
-<ul>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40676705">DOM Level 2 HTML: tabIndex</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-40676705">traduction en français</a> (non normative)</small></li>
-</ul>
diff --git a/files/fr/web/api/htmlelement/transitionend_event/index.html b/files/fr/web/api/htmlelement/transitionend_event/index.html
new file mode 100644
index 0000000000..0c45cd871c
--- /dev/null
+++ b/files/fr/web/api/htmlelement/transitionend_event/index.html
@@ -0,0 +1,192 @@
+---
+title: transitionend
+slug: Web/Events/transitionend
+tags:
+  - DOM
+  - Event
+  - TransitionEvent
+  - Transitions CSS
+  - Transitions CSS3
+  - transitionend
+translation_of: Web/API/HTMLElement/transitionend_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong><code>transitionend</code></strong> est déclenché lorsqu'une <a href="/en-US/docs/CSS/Using_CSS_transitions">transition CSS</a> est terminée. <span class="tlid-translation translation" lang="fr"><span title="">Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur</span></span> <code>none</code>, alors l'événement ne pourra pas être généré.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("TransitionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L'événement <code>transitionend</code> est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché.  Si l'événement <code>transitioncancel</code> est déclenché, l'événement <code>transitionend</code> ne se déclenchera pas.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriétés</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>propertyName</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The name of the CSS property associated with the transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{readonlyInline}}</td>
+   <td>Float</td>
+   <td>The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of <code>transition-delay</code>.</td>
+  </tr>
+  <tr>
+   <td><code>pseudoElement</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code gets an element that has a transition defined and adds a listener to the <code>transitionend</code> event:</p>
+
+<pre class="brush: js notranslate">const transition = document.querySelector('.transition');
+
+transition.addEventListener('transitionend', () =&gt; {
+  console.log('Transition ended');
+});</pre>
+
+<p>The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}:</p>
+
+<pre class="brush: js notranslate">const transition = document.querySelector('.transition');
+
+transition.ontransitionend = () =&gt; {
+  console.log('Transition ended');
+};</pre>
+
+<h3 id="Live_example">Live example</h3>
+
+<p>In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay:</p>
+
+<pre class="brush: html notranslate">&lt;div class="transition"&gt;Hover over me&lt;/div&gt;
+&lt;div class="message"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.transition {
+  width: 100px;
+  height: 100px;
+  background: rgba(255,0,0,1);
+  transition-property: transform background;
+  transition-duration: 2s;
+  transition-delay: 1s;
+}
+
+.transition:hover {
+  transform: rotate(90deg);
+  background: rgba(255,0,0,0);
+}</pre>
+
+<p>To this, we'll add some JavaScript to indicate that the <code><a href="/en-US/docs/Web/API/HTMLElement/transitionstart_event">transitionstart</a></code>, <code><a href="/en-US/docs/Web/API/HTMLElement/transitionrun_event">transitionrun</a></code>, <code><a href="/en-US/docs/Web/API/Window/transitioncancel_event">transitioncancel</a></code> and <code>transitionend</code> events fire. In this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. For the transition end event to fire, stay hovered over the transition until the transition ends.</p>
+
+<pre class="brush: js notranslate">const message = document.querySelector('.message');
+const el = document.querySelector('.transition');
+
+el.addEventListener('transitionrun', function() {
+  message.textContent = 'transitionrun fired';
+});
+
+el.addEventListener('transitionstart', function() {
+  message.textContent = 'transitionstart fired';
+});
+
+el.addEventListener('transitioncancel', function() {
+  message.textContent = 'transitioncancel fired';
+});
+
+el.addEventListener('transitionend', function() {
+  message.textContent = 'transitionend fired';
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p>
+
+<p>The <code>transitionend</code> event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.</p>
+
+<p>If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.</p>
+
+<p>If the <code>transitioncancel</code> event is fired, the <code>transitionend</code> event will not fire.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.HTMLElement.transitionend_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Le gestionnaire d'événements {{domxref("GlobalEventHandlers.ontransitionend")}}</li>
+ <li>L'interface {{domxref("TransitionEvent")}}</li>
+ <li>Propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li>
+ <li>Événements liés: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}</li>
+ <li>Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/transitionend_event", "transitionend")}}</li>
+ <li>Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/transitionend_event", "transitionend")}}</li>
+</ul>