initial commit

1 files changed, 272 insertions, 0 deletions

diff --git a/files/fr/web/css/animation-timing-function/index.html b/files/fr/web/css/animation-timing-function/index.html
new file mode 100644
index 0000000000..28b84d89a9
--- /dev/null
+++ b/files/fr/web/css/animation-timing-function/index.html
@@ -0,0 +1,272 @@
+---
+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("&lt;timing-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<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("&lt;timing-function&gt;")}} 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/Animations_CSS/Utiliser_les_animations_CSS#Utiliser_plusieurs_valeurs_pour_différentes_animations">Paramétrer plusieurs valeurs de propriétés pour les animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div>
+<h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3>
+
+<div class="hidden">
+<pre class="brush:html">&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;">.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>
+</div>
+
+<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>
+
+<div class="hidden">
+<pre class="brush:html">&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;">.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>
+</div>
+
+<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>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.animation-timing-function")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS" title="CSS developer guide about CSS animations">Utiliser les animations CSS</a></li>
+ <li>{{cssxref('timing-function')}}</li>
+ <li>L'API JavaScript {{domxref("AnimationEvent")}}</li>
+</ul>