move *.html to *.md

1 files changed, 0 insertions, 264 deletions

diff --git a/files/fr/web/css/animation-timing-function/index.html b/files/fr/web/css/animation-timing-function/index.html
deleted file mode 100644
index f3b7858272..0000000000
--- a/files/fr/web/css/animation-timing-function/index.html
+++ /dev/null
@@ -1,264 +0,0 @@
----
-title: animation-timing-function
-slug: Web/CSS/animation-timing-function
-tags:
-  - CSS
-  - Propriété
-  - Reference
-translation_of: Web/CSS/animation-timing-function
----
-<div>{{CSSRef}}</div>
-
-<p>La propriété <code><strong>animation-timing-function</strong></code> définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions {{cssxref("easing-function")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}</div>
-
-<p>Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées à une animation.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
-animation-timing-function: ease;
-animation-timing-function: ease-in;
-animation-timing-function: ease-out;
-animation-timing-function: ease-in-out;
-animation-timing-function: linear;
-animation-timing-function: step-start;
-animation-timing-function: step-end;
-
-/* Valeurs fonctionnelles */
-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
-animation-timing-function: steps(4, end);
-
-/* Valeurs avec une fonction en escalier */
-animation-timing-function: steps(4, jump-start);
-animation-timing-function: steps(10, jump-end);
-animation-timing-function: steps(20, jump-none);
-animation-timing-function: steps(5, jump-both);
-animation-timing-function: steps(6, start);
-animation-timing-function: steps(8, end);
-
-/* Définition de temporisations pour plusieurs animations */
-animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
-
-/* Valeurs globales */
-animation-timing-function: inherit;
-animation-timing-function: initial;
-animation-timing-function: unset;
-</pre>
-
-<p>Pour les animations cadencées (<em>keyframed</em>), la fonction s'applique entre chaque étape (ou <em><a href="/fr/docs/Web/CSS/@keyframes">keyframes</a></em>) plutôt que sur l'animation dans son ensemble. Autrement dit, la fonction de <em>timing</em> est appliquée au début et à la fin de l'étape de l'animation.</p>
-
-<p>Une fonction de progression pour une animation qui est définie pour une étape sera appliquée à cette étape en particulier. Si aucune fonction n'est définie pour l'étape, ce sera la fonction de progression de toute l'animation qui sera utilisée.</p>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>&lt;timing-function&gt;</code></dt>
- <dd>Chaque valeur {{cssxref("easing-function")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}.
- <p>Les valeurs avec des mots-clés (<code>ease</code>, <code>linear</code>, <code>ease-in-out</code>, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction <code>cubic-bezier()</code> permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser l'animation en intervalles de même durée.</p>
-
- <dl>
-  <dt><code>ease</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code> : c'est la valeur par défaut, la vitesse de l'animation augmente au milieu de celle-ci puis ralentit à la fin.</dd>
-  <dt><code>linear</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code> : l'animation s'effectue à vitesse constante.</dd>
-  <dt><code>ease-in</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code> : l'animation commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.</dd>
-  <dt><code>ease-out</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0, 0, 0.58, 1.0)</code> : l'animation commence rapidement puis ralentit jusqu'à la fin.</dd>
-  <dt><code>ease-in-out</code></dt>
-  <dd>Correspond à <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code> : l'animation commence lentement, accèlere puis ralentit à nouveau avant la fin.</dd>
-  <dt><code>cubic-bezier(p1, p2, p3, p4)</code></dt>
-  <dd>Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.</dd>
-  <dt><code>steps( n, &lt;jumpterm&gt;)</code></dt>
-  <dd>L'animation s'effectue selon <em>n</em> étapes de durées égales. Ainsi, si n vaut 5, l'animation se composera de cinq paliers. Selon la valeur du paramètre <em>jumpterm</em>, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) :
-  <dl>
-   <dt><code>jump-start</code></dt>
-   <dd>La fonction est continue à gauche et le premier saut se produit au début de l'animation.</dd>
-   <dt><code>jump-end</code></dt>
-   <dd>La fonction est continue à droite et le dernier saut se produit à la fin de l'animation.</dd>
-   <dt><code>jump-none</code></dt>
-   <dd>Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).</dd>
-   <dt><code>jump-both</code></dt>
-   <dd>Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant l'animation.</dd>
-   <dt><code>start</code></dt>
-   <dd>Identique à <code>jump-start.</code></dd>
-   <dt><code>end</code></dt>
-   <dd>Identique à <code>jump-end.</code></dd>
-  </dl>
-  </dd>
-  <dt><code>step-start</code></dt>
-  <dd>Synonyme de <code>steps(1, jump-start)</code></dd>
-  <dt><code>step-end</code></dt>
-  <dd>Synonyme de <code>steps(1, jump-end)</code></dd>
- </dl>
- </dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété <code>animation-*</code>, elles seront affectées selon leur ordre aux différentes animations listées par  {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir <a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_diff%c3%a9rentes_animations">Paramétrer plusieurs valeurs de propriétés pour les animations</a>.</p>
-</div>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
-
-{{csssyntax}}
-
-<h2 id="Exemples">Exemples</h2>
-
-<div>
-<h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3>
-
-<pre class="brush:html hidden">&lt;div class="parent"&gt;
-  &lt;div class="ease"&gt;ease&lt;/div&gt;
-  &lt;div class="easein"&gt;ease-in&lt;/div&gt;
-  &lt;div class="easeout"&gt;ease-out&lt;/div&gt;
-  &lt;div class="easeinout"&gt;ease-in-out&lt;/div&gt;
-  &lt;div class="linear"&gt;linear&lt;/div&gt;
-  &lt;div class="cb"&gt;cubic-bezier(0.2,-2,0.8,2)&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush:css hidden">.parent &gt; div[class] {
-    animation-name: changeme;
-    animation-duration: 10s;
-    animation-iteration-count: infinite;
-    margin-bottom: 4px;
-}
-@keyframes changeme {
-   0% {
-      min-width: 12em;
-      width: 12em;
-      background-color: black;
-      border: 1px solid red;
-      color: white;
-   }
-   100% {
-      width: 90vw;
-      min-width: 24em;
-      background-color: magenta;
-      color: yellow;
-      border: 1px solid orange;
-   }
-}
-</pre>
-
-<pre class="brush: css">.ease {
-   animation-timing-function: ease;
-}
-.easein {
-   animation-timing-function: ease-in;
-}
-.easeout {
-   animation-timing-function: ease-out;
-}
-.easeinout {
-   animation-timing-function: ease-in-out;
-}
-.linear {
-   animation-timing-function: linear;
-}
-.cb {
-   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
-}</pre>
-
-<div>{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}</div>
-</div>
-
-<div>
-<h3 id="Fonctions_en_escalier">Fonctions en escalier</h3>
-
-<pre class="brush:html hidden">&lt;div class="parent"&gt;
-  &lt;div class="jump-start"&gt;jump-start&lt;/div&gt;
-  &lt;div class="jump-end"&gt;jump-end&lt;/div&gt;
-  &lt;div class="jump-both"&gt;jump-both&lt;/div&gt;
-  &lt;div class="jump-none"&gt;jump-none&lt;/div&gt;
-  &lt;div class="start"&gt;start&lt;/div&gt;
-  &lt;div class="end"&gt;end&lt;/div&gt;
-  &lt;div class="step-start"&gt;step-start&lt;/div&gt;
-  &lt;div class="step-end"&gt;step-end&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush:css hidden">.parent &gt; div[class] {
-    animation-name: changeme;
-    animation-duration: 10s;
-    animation-iteration-count: infinite;
-    margin-bottom: 4px;
-}
-@keyframes changeme {
-   0% {
-      min-width: 12em;
-      width: 12em;
-      background-color: black;
-      border: 1px solid red;
-      color: white;
-   }
-   100% {
-      width: 90vw;
-      min-width: 24em;
-      background-color: magenta;
-      color: yellow;
-      border: 1px solid orange;
-   }
-}
-</pre>
-
-<pre class="brush: css">.jump-start {
-   animation-timing-function: steps(5, jump-start);
-}
-.jump-end {
-   animation-timing-function: steps(5, jump-end);
-}
-.jump-none {
-   animation-timing-function: steps(5, jump-none);
-}
-.jump-both {
-   animation-timing-function: steps(5, jump-both);
-}
-.start {
-   animation-timing-function: steps(5, start);
-}
-.end {
-   animation-timing-function: steps(5, end);
-}
-.step-start {
-   animation-timing-function: step-start;
-}
-.step-end {
-   animation-timing-function: step-end;
-}</pre>
-
-<div>{{EmbedLiveSample("Fonctions_en_escalier")}}</div>
-</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 Animations', '#animation-timing-function', 'animation-timing-function')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</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.animation-timing-function")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Utiliser les animations CSS</a></li>
- <li>{{cssxref('easing-function')}}</li>
- <li>L'API JavaScript {{domxref("AnimationEvent")}}</li>
-</ul>