move *.html to *.md

1 files changed, 0 insertions, 169 deletions

diff --git a/files/fr/web/css/@keyframes/index.html b/files/fr/web/css/@keyframes/index.html
deleted file mode 100644
index 9856d8f815..0000000000
--- a/files/fr/web/css/@keyframes/index.html
+++ /dev/null
@@ -1,169 +0,0 @@
----
-title: '@keyframes'
-slug: Web/CSS/@keyframes
-tags:
-  - CSS
-  - Reference
-  - Règle @
-translation_of: Web/CSS/@keyframes
----
-<div>{{CSSRef}}</div>
-
-<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle </a><strong><code>@keyframes</code></strong> permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec <a href="/fr/docs/Web/CSS/CSS_Transitions">les transitions</a>.</p>
-
-<pre class="brush: css no-line-numbers">@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}</pre>
-
-<p>Il est possible de manipuler la règle @ <code>@keyframes</code> via JavaScript et le CSSOM, notamment avec l'interface {{domxref("CSSKeyframesRule")}}.</p>
-
-<p>Afin d'utiliser ces règles, on créera une règle <code>@keyframes</code> avec un nom pour chaque étape et on utilisera ce nom avec la propriété {{cssxref("animation-name")}} afin qu'une animation corresponde à la liste des étapes qui la composent. Chaque règle <code>@keyframes</code> contient une liste de sélecteurs d'étapes dont chacun contient le pourcentage d'avancement de l'animation auquel il correspond ainsi que les informations de styles qui correspondent à cette étape..</p>
-
-<p>Les étapes peuvent être listées dans n'importe quel ordre. Elles seront enchaînées dans l'ordre indiqué par le pourcentage d'avancement.</p>
-
-<h3 id="Validité_de_la_liste_des_étapes">Validité de la liste des étapes</h3>
-
-<p>Si une liste d'étapes ne spécifie pas le début (<code>0%</code>/<code>from</code>) ou la fin (<code>100%</code>/<code>to</code>) d'une animation, le navigateur va utiliser les styles de l'élement définis par ailleurs. C'est assez pratique pour animer un élément depuis et vers son état initial.</p>
-
-<p>Si les étapes décrivent des propriétés qui ne peuvent pas être animées, elles seront ignorées mais les autres propriétés seront bien animées.</p>
-
-<h3 id="Résolution_des_doublons">Résolution des doublons</h3>
-
-<p>Si plusieurs règles <code>@keyframes</code> existent avec le même nom, c'est la dernière qui est utilisée. Les règles <code>@keyframes</code> ne forment pas de cascade et il n'y a donc pas de dérivation entre les différentes règles qui porteraient le même nom.</p>
-
-<p>Si, au sein d'une même règle, deux étapes décrivent le même pourcentage d'avancement, c'est la dernière qui est utilisée pour décrire ce moment de l'animation. Il n'y a aucune cascade qui composerait différentes étapes décrivant le même avancement.</p>
-
-<h3 id="Gestion_des_propriétés_absentes">Gestion des propriétés absentes</h3>
-
-<p>Si des propriétés ne sont pas définies à chaque étape, elles sont interpolées si possible. Si ces propriétés ne peuvent pas être interpolées, elles sont retirées de l'animation :</p>
-
-<pre class="brush: css">@keyframes identifier {
-  0% { top: 0; left: 0; }
-  30% { top: 50px; }
-  68%, 72% { left: 50px; }
-  100% { top: 100px; left: 100%; }
-}
-</pre>
-
-<p>Ici, la propriété {{cssxref("top")}} est animée en passant par les étapes <code>0%</code>, <code>30%</code> et <code>100%</code>. Quant à {{cssxref("left")}}, elle est animée aux étapes <code>0%</code>, <code>68%</code> , <code>72%</code> et <code>100%</code>.</p>
-
-<p>Seules les propriétés qui sont définies sur les étapes de début (<code>0%</code>) et de fin (<code>100%</code>) seront animées. Toutes les propriétés qui ne sont pas incluses dans les descriptions de ces étapes conserveront leurs valeurs de départ au cours de l'animation.</p>
-
-<h3 id="!important_dans_une_étape"><code>!important</code> dans une étape</h3>
-
-<p>Les déclarations qui utilisent <code>!important</code> dans une description d'étape sont ignorées</p>
-
-<pre class="brush: css">@keyframes important1 {
-  from { margin-top: 50px; }
-  50%  { margin-top: 150px !important; } /* ignorée */
-  to   { margin-top: 100px; }
-}
-
-@keyframes important2 {
-  from { margin-top: 50px;
-         margin-bottom: 100px; }
-  to   { margin-top: 150px !important; /* ignorée */
-         margin-bottom: 50px; }
-}
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;identifier&gt;</code></dt>
- <dd>Un nom ({{cssxref("custom-ident")}}) qui permet d'identifier la liste d'étapes. Cela doit être <a href="/fr/docs/Web/CSS/custom-ident">un identifiant valide selon la syntaxe CSS</a>.</dd>
- <dt><code>from</code></dt>
- <dd>Indique le point de départ de l'animation (correspond à un avancement de <code>0%</code>).</dd>
- <dt><code>to</code></dt>
- <dd>Indique la fin de l'animation (correspond à un avancement de <code>100%</code>).</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>Le pourcentage d'avancement de l'animation auquel l'étape décrite s'applique.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
-
-{{csssyntax}}
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">p {
-  animation-duration: 25s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-  75% {
-    font-size: 300%;
-    margin-left: 25%;
-    width: 150%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p&gt;
-  Le Chat grimaça en apercevant Alice. Elle trouva qu’il
-  avait l’air bon enfant, et cependant il avait de
-  très longues griffes et une grande rangée de dents ;
-  aussi comprit-elle qu’il fallait le traiter avec
-  respect.
-&lt;/p&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","500","300")}}</p>
-
-<h3 id="Plus_dexemples">Plus d'exemples ?</h3>
-
-<p>Regardez <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Utiliser les animations CSS</a> pour de plus amples exemples.</p>
-
-<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 Animations', '#keyframes', '@keyframes')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.keyframes")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
- <li>{{domxref("AnimationEvent")}}</li>
-</ul>