convert content to md

1 files changed, 40 insertions, 54 deletions

diff --git a/files/fr/web/css/animation-play-state/index.md b/files/fr/web/css/animation-play-state/index.md
index c0dcf45efb..9a1e643d7a 100644
--- a/files/fr/web/css/animation-play-state/index.md
+++ b/files/fr/web/css/animation-play-state/index.md
@@ -7,17 +7,18 @@ tags:
   - Reference
 translation_of: Web/CSS/animation-play-state
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété <strong><code>animation-play-state</code></strong> définit si une animation est en cours d'exécution ou si elle est en pause.</p>
+La propriété **`animation-play-state`** définit si une animation est en cours d'exécution ou si elle est en pause.
 
-<div>{{EmbedInteractiveExample("pages/css/animation-play-state.html")}}</div>
+{{EmbedInteractiveExample("pages/css/animation-play-state.html")}}
 
-<p>Lorsqu'on reprend une animation en pause, celle-ci reprendra où elle avait été interrompue (elle ne recommencera pas depuis le début de la séquence).</p>
+Lorsqu'on reprend une animation en pause, celle-ci reprendra où elle avait été interrompue (elle ne recommencera pas depuis le début de la séquence).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: css no-line-numbers">/* On a une seule animation */
+```css
+/* On a une seule animation */
 animation-play-state: running;
 animation-play-state: paused;
 
@@ -29,30 +30,27 @@ animation-play-state: paused, running, running;
 animation-play-state: inherit;
 animation-play-state: initial;
 animation-play-state: unset;
-</pre>
+```
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>running</code></dt>
- <dd>L'animation est en cours.</dd>
- <dt><code>paused</code></dt>
- <dd>L'animation est en pause.</dd>
-</dl>
+- `running`
+  - : L'animation est en cours.
+- `paused`
+  - : L'animation est en pause.
 
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">paramétrer les valeurs des propriétés pour plusieurs animations</a>.</p>
-</div>
+> **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : [paramétrer les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   animation-duration: 3s;
   animation-name: glissement;
   animation-iteration-count: infinite;
@@ -76,53 +74,41 @@ animation-play-state: unset;
     margin-left: 0%;
     width: 100%;
   }
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p class="arret"&gt;
+```html
+<p class="arret">
   La Chenille et Alice se considérèrent un instant en silence.
   Enfin la Chenille sortit le houka de sa bouche, et lui adressa
   la parole d’une voix endormie et traînante.
-&lt;/p&gt;
+</p>
 
-&lt;p class="encours"&gt;
+<p class="encours">
   Alice, un peu irritée du parler bref de la Chenille, se redressa
   de toute sa hauteur.
-&lt;/p&gt; </pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+{{EmbedLiveSample("Exemples","300","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<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 Animations', '#animation-play-state', 'animation-play-state')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.animation-play-state")}}</p>
+{{Compat("css.properties.animation-play-state")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
- <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
-</ul>
+- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS)
+- {{domxref("AnimationEvent", "AnimationEvent")}}