unslug fr: move

4 files changed, 708 insertions, 0 deletions

diff --git a/files/fr/web/css/css_animations/detecting_css_animation_support/index.html b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html
new file mode 100644
index 0000000000..a2cb1bd5a3
--- /dev/null
+++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html
@@ -0,0 +1,99 @@
+---
+title: Détecter la prise en charge des animations CSS
+slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS
+tags:
+  - Avancé
+  - CSS
+  - Obsolete
+translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+---
+<div>{{CSSRef}}{{obsolete_header}}</div>
+
+<div class="warning">
+<p><strong>Attention !</strong> Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.</p>
+</div>
+
+<p>Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, <a href="https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">basé sur ce billet de Christian Heilmann</a>, illustre une technique pour détecter la prise en charge des animations CSS.</p>
+
+<h2 id="Détecter_la_prise_en_charge_des_animations_CSS">Détecter la prise en charge des animations CSS</h2>
+
+<p>Ce code JavaScript permet de vérifier que les animations CSS peuvent être utilisées dans le navigateur :</p>
+
+<pre class="brush: js">var animation = false,
+  animationstring = 'animation',
+  keyframeprefix = '',
+  domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+  pfx  = '',
+  elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i &lt; domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+</pre>
+
+<p>Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant <code>animation</code> avec <code>false</code>. On utilise la chaîne de caractères <code>animationstring</code> avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable <code>pfx</code> qu'on définit pour le moment avec la chaîne vide.</p>
+
+<p>Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}}  on est définie sur l'élément représenté par la variable <code>elem</code>. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe.</p>
+
+<p>Si le navigateur ne prend pas en charge la version sans préfixe et que <code>animation</code> vaut toujours <code>false</code>, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de <code>AnimationName</code> de la même façon.</p>
+
+<p>Une fois que ce code a fini son exécution, la valeur de <code>animation</code> sera <code>false</code> si les animations ne sont pas prises en charge ou <code>true</code> si <code>animation</code> est le bon nom et que le préfixe est correct. Pour les préfixes, on fera attention à la variation entre le <em>camelCase</em> (ex. <code>MozAnimation</code>) et les tirets (<code>-moz-x</code>).</p>
+
+<h2 id="Appliquer_des_animations_avec_la_bonne_syntaxe_selon_le_navigateur">Appliquer des animations avec la bonne syntaxe selon le navigateur</h2>
+
+<p>Maintenant qu'on sait que les animations CSS sont prises en charge, on peut appliquer des animations :</p>
+
+<pre class="brush: js">if( animation === false ) {
+
+  // on utilise JavaScript en fallback
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets &amp;&amp; document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+</pre>
+
+<p>Ce code utilise la valeur d'<code>animation</code> : si c'est <code>false</code>, on utilise JavaScript pour recréer l'effet de l'animation. Sinon, on utilise JavaScript pour manipuler les animations CSS.</p>
+
+<p>Pour définir la propriété d'animation, il suffit de mettre à jour la valeur dans la collection de style. Cependant, c'est un peu plus compliqué de gérer les étapes/<em>keyframes</em> car elles n'utilisent pas la syntaxe CSS traditionnelle.</p>
+
+<p>Pour définir les étapes de l'animation avec JavaScript, il faut les écrire dans une chaîne de caractères CSS. On définit alors une variable <code>keyframes</code> qu'on construit avec le préfixe à utiliser. Une fois construite, cette variable contient la description complète des différentes étapes nécessaires à la description.</p>
+
+<p>Ensuite, il faut ajouter les étapes au CSS de la page. Pour commencer, on regarde s'il n'y a pas déjà une feuille de style associée au document et si c'est le cas, on ajoute la description des étapes dans la feuille de style (cf. les lignes 13 et 15 du fragment de code ci-avant).</p>
+
+<p>S'il n'y aucune feuille de style pré-existante, on crée un nouvel élément {{HTMLElement("style")}} et on remplit son contenu avec la valeur des étapes. Ensuite, on insère ce nouvel élément {{HTMLElement("style")}} dans l'élément {{HTMLElement("head")}} du document ce qui ajoute la nouvelle feuille de style au document.</p>
+
+<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">Voir dans JSFiddle</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Les animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/css_animations/index.html b/files/fr/web/css/css_animations/index.html
new file mode 100644
index 0000000000..acc7ab6997
--- /dev/null
+++ b/files/fr/web/css/css_animations/index.html
@@ -0,0 +1,81 @@
+---
+title: Les animations CSS
+slug: Web/CSS/Animations_CSS
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>animations CSS</strong> sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (<em>keyframes</em> en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="Règles_CSS">Règles @ CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Détecter la prise en charge des animations CSS</a></dt>
+ <dd>Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></dt>
+ <dd>Un tutoriel pas-à-pas qui explique comment créer des animations CSS. Cet article décrit les différentes propriétés et règles @ relatives aux animations et comment elles interagissent.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Animations_CSS/Conseils">Conseils pour les animations CSS</a></dt>
+ <dd>Des conseils et astuces pour tirer le meilleur parti des animations CSS. Dans cet article, on décrit une technique qui permet de relancer une animation qui a déjà été exécutée, ce que l'API ne permet pas de faire nativement.</dd>
+</dl>
+
+<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')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Propriété_animation">Propriété <code>animation</code></h3>
+
+<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")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions">Les transitions CSS</a> qui permettent de déclencher des animations suite à des actions utilisateur.</li>
+</ul>
diff --git a/files/fr/web/css/css_animations/tips/index.html b/files/fr/web/css/css_animations/tips/index.html
new file mode 100644
index 0000000000..bb79f19722
--- /dev/null
+++ b/files/fr/web/css/css_animations/tips/index.html
@@ -0,0 +1,165 @@
+---
+title: Trucs et astuces pour les animations CSS
+slug: Web/CSS/Animations_CSS/Conseils
+tags:
+  - Animations CSS
+  - CSS
+  - Exemple
+  - Guide
+  - Tutoriel
+translation_of: Web/CSS/CSS_Animations/Tips
+---
+<div>{{CSSRef}}</div>
+
+<p>Les animations CSS permettent de réaliser réaliser des effets incroyables en mainpulant les éléments de vos documents et applications.. Cependant, il est parfois compliqué d'obtenir l'effet désiré. Dans cet article, on explorera différents conseils visant à simplifier la réalisation d'animations.</p>
+
+<h2 id="Relancer_une_animation">Relancer une animation</h2>
+
+<p>La spécifications des <a href="/en-US/docs/Web/CSS/CSS_Animations">animations CSS</a> ne permet pas de relancer une animation. Il n'existe pas de méthode <code>resetAnimation()</code> qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur <code>"running"</code>. Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).</p>
+
+<div class="hidden">
+<pre class="brush: css">.runButton {
+  cursor: pointer;
+  width: 300px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 12px;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  font: 14px "Open Sans", "Arial", sans-serif;
+}</pre>
+</div>
+
+<pre class="brush: css">@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}</pre>
+
+<p>On a deux classes qui sont définies. La classe <code>box</code> qui décrit l'apparence de la boîte, sans aucune information relative à l'animation. Les détails de l'animation sont inclus dans la classe <code>changing</code> qui indique que les {{cssxref("@keyframes")}} intitulées <code>colorchange</code> doivent être utilisées sur une période de deux secondes afin d'animer la boîte.</p>
+
+<p>Si on n'utilise que ces règles, la boîte n'est pas animée lorsqu'elle s'affiche.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Voici le fragment de HTML où on utilise un élément {{HTMLElement("div")}} qu'on veut animer et un bouton pour lancer (ou relancer) l'animation.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+&lt;/div&gt;
+
+&lt;div class="runButton" onclick="play()"&gt;Cliquer pour lancer l'animation&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Enfin, voyons le JavaScript qui sera utilisé. Cette technique repose principalement sur la fonction <code>play()</code> qui est appelée lorsque l'utilisateur clique sur le bouton.</p>
+
+<pre class="brush: js">function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}</pre>
+
+<p>Cela paraît un peu étrange. Mais afin que l'animation soit lancée à nouveau, il faut : retirer l'effet d'animation, lancer le recalcul des styles dans le document pour que cette action soit enregistrée puis ajouter l'animation à nouveau sur l'élément.</p>
+
+<p>Voici ce qui se produit lorsque la fonction <code>play()</code> est appelée :</p>
+
+<ol>
+ <li>On réinitialise la liste des classes CSS de la boîte avec uniquement <code>box</code>. Ce faisant, on retire toutes les autres classes qui s'appliquaient à la boîte, y compris la classe <code>changing</code> en charge de l'animation. Autrement dit, on retire l'effet d'animation. Toutefois, ces modifications de classes n'auront pas d'effet tant que les styles ne sont pas recalculés et qu'un rafraîchissement est réalisé pour appliquer ces modifications.</li>
+ <li>Afin de s'assurer que les styles sont recalculés, on utilise {{domxref("window.requestAnimationFrame()")}} en définissant une fonction de rappel (<em>callback</em>). La fonction de rappel est exécutée juste avant le prochain rafraîchissement du document. Seul problème : avant le rafraîchissement, le recalcul des styles n'a pas encore eu lieu. Aussi…</li>
+ <li>Notre fonction de rappel invoque à nouveau <code>requestAnimationFrame()</code> ! Cette fois, la fonction de rappel est lancée avant le prochain rafraîchissement qui aura lieu après le recalcul des styles. Dans cette nouvelle fonction de rappel, on ajoute la classe <code>changing</code> à la boîte afin que l'animation soit lancée lors du rafraîchissement.</li>
+</ol>
+
+<p>Bien entendu, on ajoutera également un gestion d'événement au bouton pour que l'ensemble soit bien branché :</p>
+
+<pre class="brush: js">document.querySelector(".runButton").addEventListener("click", play, false);</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Relancer_une_animation', 320, 160)}}</p>
+
+<h2 id="Arrêter_une_animation">Arrêter une animation</h2>
+
+<p>Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes :</p>
+
+<ol>
+ <li>L'animation doit être la plus isolée possible et on ne doit pas reposer sur  <code>animation-direction: alternate</code>. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle.</li>
+ <li>Utiliser JavaScript pour retirer l'animation lorsque l'évènement <code>animationiteration</code> se déclenche.</li>
+</ol>
+
+<p>Ces pistes sont utilisées dans la démonstration suivante :</p>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+</pre>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;h1 id="watchme"&gt;Cliquer pour arrêter&lt;/h1&gt;
+</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js">let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) =&gt; {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =&gt;
+  watchme.addEventListener('animationiteration', listener, false)
+)
+</pre>
+
+<h3 id="Résultat_2">Résultat</h3>
+
+<p>{{EmbedLiveSample("Arrêter_une_animation")}}</p>
+
+<p><a href="https://jsfiddle.net/morenoh149/5ty5a4oy/">Voir cette démo</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS">Les animations CSS</a></li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/fr/web/css/css_animations/using_css_animations/index.html b/files/fr/web/css/css_animations/using_css_animations/index.html
new file mode 100644
index 0000000000..4010492e3d
--- /dev/null
+++ b/files/fr/web/css/css_animations/using_css_animations/index.html
@@ -0,0 +1,363 @@
+---
+title: Utiliser les animations CSS
+slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS
+tags:
+  - Avancé
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>animations CSS</strong> permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un ensemble d'étapes (<em>keyframes</em>) qui indiquent l'état initial, final et éventuellement des états intermédiaires d'autre part.</p>
+
+<p>Trois avantages permettent de distinguer les animations CSS des techniques d'animations utilisant JavaScript :</p>
+
+<ol>
+ <li>On peut aisément obtenir des animations simples sans avoir à connaître JavaScript.</li>
+ <li>Les animations s'exécuteront correctement même lorsque le système est soumis à une charge modérée. Il est possible que des animations JavaScript s'exécutent lentement si elles sont mal décrites. Dans le cadre des animations CSS, le moteur de rendu peut utiliser certaines techniques (comme le <em>frame-skipping</em>) afin que le résultat obtenu soit aussi fluide que possible.</li>
+ <li>En laissant le contrôle de l'animation au navigateur, celui-ci peut optimiser les performances et l'efficacité du système, par exemple en réduisant la fréquence de mise à jour des animations qui sont exécutées dans des onglets qui ne sont pas visibles à l'écran.</li>
+</ol>
+
+<h2 id="Paramétrer_l'animation">Paramétrer l'animation</h2>
+
+<p>Pour créer une animation CSS, il faut utiliser la propriété raccourcie {{cssxref("animation")}} ou les propriétés détaillées correspondantes sur un ou plusieurs éléments. Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de l'animation. <strong>Attention, cela ne détermine pas l'apparence visuelle de l'animation.</strong> Celle-ci est définie en utilisant des règles CSS de mise en forme au sein de la règle @ {{cssxref("@keyframes")}} comme décrit ci-après.</p>
+
+<p>Les propriétés détaillées rattachées à la propriété raccourcie {{cssxref("animation")}} sont :</p>
+
+<dl>
+ <dt>{{cssxref("animation-delay")}}</dt>
+ <dd>Cette propriété définit le délai entre le moment où l'élément est chargé et le moment où l'animation commence.</dd>
+ <dt>{{cssxref("animation-direction")}}</dt>
+ <dd>Cette propriété indique si l'animation doit alterner entre deux directions de progressions (faire des allers-retours) ou recommencer au début à chaque cycle de répétition.</dd>
+ <dt>{{cssxref("animation-duration")}}</dt>
+ <dd>Cette propriété définit la durée d'un cycle de l'animation.</dd>
+ <dt>{{cssxref("animation-fill-mode")}}</dt>
+ <dd>Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l'exécution de l'animation.</dd>
+ <dt>{{cssxref("animation-iteration-count")}}</dt>
+ <dd>Cette propriété détermine le nombre de fois que l'animation est répétée. On peut utiliser le mot-clé <code>infinite</code> afin de répéter une animation infiniment.</dd>
+ <dt>{{cssxref("animation-name")}}</dt>
+ <dd>Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l'animation pour la règle @ {{cssxref("@keyframes")}}.</dd>
+ <dt>{{cssxref("animation-play-state")}}</dt>
+ <dd>Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.</dd>
+ <dt>{{cssxref("animation-timing-function")}}</dt>
+ <dd>Cette propriété configure la fonction de minutage d'une animation, autrement dit comment celle-ci accélère entre l'état initial et l'état final notamment grâce à des fonctions décrivant des courbes d'accélération.</dd>
+</dl>
+
+<h2 id="Définir_les_étapes_composant_une_animation_(keyframes)">Définir les étapes composant une animation (<code>@keyframes</code>)</h2>
+
+<p>Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @ {{cssxref("@keyframes")}}. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné lors de l'animation.</p>
+
+<p>La durée de l'animation est définie avant et la règle <code>@keyframes</code> utilise donc des valeurs exprimées en pourcentages (type CSS {{cssxref("percentage")}}) pour indiquer l'instant correspondant à cet état. 0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très important, il existe deux alias pour les décrire : <code>from</code> et <code>to</code>. Ces états sont optionnels et si <code>from</code>/<code>0%</code> ou <code>to</code>/<code>100%</code> ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes propriétés.</p>
+
+<p>Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de l'animation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="note"><strong>Note :</strong> Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « <em>live</em> » ne fonctionnera pas.</div>
+
+<h3 id="Utiliser_une_animation_pour_que_le_texte_traverse_la_fenêtre_du_navigateur">Utiliser une animation pour que le texte traverse la fenêtre du navigateur</h3>
+
+<p>Dans cet exemple simple, on met en forme l'élément {{HTMLElement("p")}} afin que le texte passe de la droite vers la gauche de l'écran</p>
+
+<p>On notera que les animations comme celle-ci peuvent agrandir la page qui sera alors plus grande que la fenêtre du navigateur. Pour éviter ce problème, on pourra placer l'élément animé dans un conteneur et utiliser {{cssxref("overflow")}}<code>:hidden</code> sur ce conteneur.</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<p>Dans cet exemple, on indique dans les propriétés de {{HTMLElement("p")}} que l'animation doit durer trois secondes entre le début et la fin (c'est le rôle de {{cssxref("animation-duration")}}) et que le nom utilisé par la règle @ {{cssxref("@keyframes")}} pour faire référence à cette animation sera <code>slidein</code>.</p>
+
+<p>Ici, on ne souhaite illustrer que les animations mais on aurait très bien pu avoir d'autres règles « classiques » pour d'autres propriétés à déclarer sur l'élément.</p>
+
+<p>Les étapes (<em>keyframes</em>) de l'animation sont définies via la règle @ {{cssxref("@keyframes")}}. Dans ce premier exemple, on a uniquement deux étapes. La première décrit l'état à 0% (on utilise l'alias <code>from</code>). Pour cet état initial, on veut que la marge gauche de l'élément soit à 100% (c'est-à-dire tout à droite de l'élément englobant) et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément englobant). Cela permet que le contenu soit dessiné hors de la fenêtre lors de l'état initial.</p>
+
+<p>La seconde, et dernière, étape, se produit à 100% d'avancement (dans l'exemple, on utilise l'alias <code>to</code>). Pour cet état, la marge gauche vaut 0% et la largeur de l'élément vaut 100%. De cette façon le contenu finit sa course contre le borde gauche de la zone de contenu.</p>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.</p>
+</div>
+
+<p>{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}}</p>
+
+<h3 id="Ajouter_une_autre_étape">Ajouter une autre étape</h3>
+
+<p>Ajoutons une autre étape à partir de l'animation précédente. Ici, nous allons agrandir la taille de police utilisée lorsque l'élément arrive de la droite avant qu'elle ne réduise à nouveau pour revenir à la taille originale une fois arrivée la fin de l'animation. Pour cela, on ajoute une étape dans la règle @ <code>@keyframes</code> :</p>
+
+<pre class="brush: css">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+
+<pre class="brush: css hidden">p {
+  animation-duration: 3s;
+  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>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>Cette nouvelle étape indique au navigateur que, lorsqu'on atteint 75% d'avancement, il faut que la marge à gauche soit de 25% et que la largeur du paragraphe représente 150% de la largeur de l'élément englobant.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.</p>
+</div>
+
+<p>{{EmbedLiveSample("Ajouter_une_autre_étape","100%","250")}}</p>
+
+<h3 id="Répéter_une_animation">Répéter une animation</h3>
+
+<p>Pour que l'animation se répète, il suffit d'utiliser la propriété {{cssxref("animation-iteration-count")}} et d'indiquer le nombre de répétitions souhaitées. Ici, on utilise la valeur <code>infinite</code> pour que l'animation se répète à l'infini :</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+</pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Répéter_une_animation","100%","250")}}</p>
+
+<h3 id="Obtenir_un_effet_aller-retour">Obtenir un effet aller-retour</h3>
+
+<p>On a donc une animation qui se répète mais on obtient un résultat étrange, l'animation redémarre à chaque fois depuis l'état initial. Si on veut que le texte parcourt l'écran de droite à gauche puis de gauche à droite, on pourra utiliser la propriété {{cssxref("animation-direction")}} avec la valeur <code>alternate</code> :</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Obtenir_un_effet_aller-retour","100%","250")}}</p>
+
+<h3 id="Utiliser_la_propriété_raccourcie_animation">Utiliser la propriété raccourcie <code>animation</code></h3>
+
+<p>La propriété raccourcie {{cssxref("animation")}} permet d'économiser de l'espace. Par exemple, si on prend cette règle :</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<p>On peut la réécrire de façon plus concise :</p>
+
+<pre class="brush: css">p {
+  animation: 3s infinite alternate slidein;
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.</p>
+</div>
+
+<h3 id="Utiliser_plusieurs_valeurs_pour_différentes_animations">Utiliser plusieurs valeurs pour différentes animations</h3>
+
+<p>Les propriétés CSS détaillées permettent d'utiliser plusieurs valeurs, séparées par des virgules. Cela permet de paramétrer plusieurs animations via une seule règle. Prenons quelques exemples.</p>
+
+<p>Dans ce premier exemple, on a trois animations nommées différemment mais qui utilisent la même durée et le même nombre d'itération :</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;</pre>
+
+<p>Dans ce deuxième exemple, les trois propriétés ont cette fois des composantes distinctes, pour la durée et le nombre d'itération. Ici, par exemple <code>fadeInOut</code> a une durée de 2.5s et 2 itérations.</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;</pre>
+
+<p>Dans ce troisième cas, on a toujours trois animations mais uniquement deux durées et deux nombres d'itération. Lorsqu'il y a moins de valeurs que d'animations, on boucle sur les valeurs. Par exemple, avec le code qui suit, <code>fadeInOut</code> durera <code>2.5s</code>, <code>moveLeft300px</code> durera <code>5s</code>. On arrive à la fin de la liste des valeurs de durée et on reprend donc au début : <code>bounce</code> aura donc une durée de <code>2.5s</code>. Le nombre d'itérations sera affecté de la même façon.</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;</pre>
+
+<h3 id="Utiliser_les_événements_liés_aux_animations">Utiliser les événements liés aux animations</h3>
+
+<p>Il est possible d'obtenir des informations et un certain contrôle sur les animations en utilisant l'objet {{domxref("AnimationEvent")}}. Celui-ci peut être utilisé pour détecter quand les animations commencent, finissent et il peut déclencher une nouvelle itération. Chaque événement inclue l'instant auquel il s'est produit et le nom de l'animation qui a déclenché l'événement.</p>
+
+<p>Dans la suite de cet article, nous allons modifier l'exemple précédent pour obtenir des informations supplémentaires sur chaque événement d'animation lorsqu'il se produit afin de mieux voir comment cela fonctionne.</p>
+
+<h4 id="La_feuille_de_style_CSS">La feuille de style CSS</h4>
+
+<p>On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 secondes, sera intitulée <code>slidein</code>, se répètera trois fois et changera de direction pour faire des allers-retours. Dans la règle @ {{cssxref("@keyframes")}}, on manipule la largeur et la marge à gauche de l'élément afin que ce dernier traverse l'écran.</p>
+
+<pre class="brush: css">.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}</pre>
+
+<h4 id="Les_gestionnaires_d'événements">Les gestionnaires d'événements</h4>
+
+<p>On utilisera JavaScript pour « écouter » les trois événements possibles. Le code qui suit permet de définir les gestionnaires d'événement (à utiliser une fois que le document a été chargé).</p>
+
+<pre class="brush: js">var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+</pre>
+
+<p>Ce code est plutôt classique, n'hésitez pas à consulter la documentation de {{domxref("eventTarget.addEventListener()")}} si besoin. Pour finir, ce script attribut une classe sur <code>slidein</code> sur l'élément.</p>
+
+<p>Quel est l'intérêt ? En fait, l'événement <code>animationstart</code> est déclenché dès que l'animation démarre et cela se produit alors avant l'exécution du script. Pour éviter cela, on démarre l'animation via le script en définissant la classe de l'élément à animer.</p>
+
+<h4 id="Écouter_les_événements">Écouter les événements</h4>
+
+<p>Les événements sont transmis à la fonction <code>listener()</code> décrite ici :</p>
+
+<pre class="brush: js">function listener(event) {
+  var l = document.createElement("li");
+  switch(event.type) {
+    case "animationstart":
+      l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Fin : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "Nouvelle boucle démarrée à : " + event.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>Ce code consulte {{domxref("event.type")}} afin de déterminer l'événement qui s'est produit puis ajoute un élément {{HTMLElement("ul")}} au document pour alimenter un journal des événements.</p>
+
+<p>Le résultat obtenu devrait ressembler à quelque chose comme :</p>
+
+<ul>
+ <li>Début : durée écoulée : 0</li>
+ <li>Nouvelle boucle démarrée à : 3.01200008392334</li>
+ <li>Nouvelle boucle démarrée à : 6.00600004196167</li>
+ <li>Fin : durée écoulée : 9.234000205993652</li>
+</ul>
+
+<p>On voit ici que les durées sont proches mais pas exactes. On voit également que, lors de la fin de l'animation, l'événement <code>animationiteration</code> n'est pas envoyé, seul <code>animationend</code> est déclenché.</p>
+
+<h4 id="Le_document_HTML">Le document HTML</h4>
+
+<p>Afin d'être tout à fait complet, voici le code HTML qui peut être utilisé et qui contint la liste dans laquelle on enregistrera les événements reçus :</p>
+
+<pre class="brush: html">&lt;h1 id="watchme"&gt;Regardez-moi bouger&lt;/h1&gt;
+&lt;p&gt;
+  Un exemple d'animation CSS pour déplacer
+  un élément &lt;code&gt;H1&lt;/code&gt; sur une page.
+&lt;/p&gt;
+&lt;p&gt;
+  Voici les événements relatifs aux animations :
+&lt;/p&gt;
+&lt;ul id="output"&gt;
+&lt;/ul&gt;
+&lt;/body&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Utiliser_les_événements_liés_aux_animations', '600', '300')}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS">Détecter la prise en charge des animations CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Manipuler les transitions CSS</a></li>
+ <li><a href="https://www.cssdebutant.com">CSS</a></li>
+</ul>