path: root/files/fr/web/css/animation/index.html

---
title: animation
slug: Web/CSS/animation
tags:
  - Animations
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/animation
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>animation</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> qui permet de d'appliquer une animation entre des styles.</p>

<p>C'est une propriété qui synthétise les propriétés suivantes :</p>

<ul>
 <li>{{cssxref("animation-name")}},</li>
 <li>{{cssxref("animation-duration")}},</li>
 <li>{{cssxref("animation-timing-function")}},</li>
 <li>{{cssxref("animation-delay")}},</li>
 <li>{{cssxref("animation-iteration-count")}},</li>
 <li>{{cssxref("animation-direction")}},</li>
 <li>{{cssxref("animation-fill-mode")}},</li>
 <li>{{cssxref("animation-play-state")}}.</li>
</ul>

<div>{{EmbedInteractiveExample("pages/css/animation.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>

<pre class="brush:css no-line-numbers">/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
  animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
  animation: 3s linear 1s slidein;

/* @keyframes duration | name */
  animation: 3s slidein;
</pre>

<div class="hidden" id="animation">
<pre class="brush: html">&lt;div class="grid"&gt;
  &lt;div class="col"&gt;
    &lt;div class="note"&gt;
      Avec l'animation suivante :
      &lt;pre&gt;@keyframes slidein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}&lt;/pre&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell"&gt;
        &lt;button class="play" title="LECTURE"&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="cell flx"&gt;
        &lt;div class="overlay"&gt;animation: 3s ease-in 1s 2 reverse both paused slidein;&lt;/div&gt;
        &lt;div class="animation a1"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell"&gt;
        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="cell flx"&gt;
        &lt;div class="overlay"&gt;animation: 3s linear 1s slidein;&lt;/div&gt;
        &lt;div class="animation a2"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell"&gt;
        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="cell flx"&gt;
        &lt;div class="overlay"&gt;animation: 3s slidein;&lt;/div&gt;
        &lt;div class="animation a3"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

<pre class="brush: css">html,body {
  height: 100%;
  box-sizing: border-box;
}

pre { margin-bottom: 0; }
svg { width: 1.5em; height: 1.5em; }

button {
  width: 27px;
  height: 27px;
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 3px;
  cursor: pointer;
}

button.play {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#play');
}

button.pause {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#pause');
}

button.restart {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#restart');
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  background: #EEE;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}

.cell {
  box-sizing: border-box;
  margin: .5em;
  padding: 0;
  background-color: #FFF;
  overflow: hidden;
  text-align: left;
}

.flx {
  flex: 1 0;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: .5em;
  font: .8em sans-serif;
  text-align: left;
  flex: none;
}

.overlay { padding: .5em; }

@keyframes slidein {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; }
.a2 { animation: 3s linear 1s slidein; }
.a3 { animation: 3s slidein; }

.animation {
  background: #3F87A6;
  width: 100%;
  height: calc(100% - 1.5em);
  transform-origin: left center;
}</pre>

<pre class="brush: js">window.addEventListener('load', function () {
  var ANIMATION = Array.from(document.querySelectorAll('.animation'));
  var BUTTON    = Array.from(document.querySelectorAll('button'));

  function toggleButton (btn, type) {
    btn.classList.remove('play', 'pause', 'restart');
    btn.classList.add(type);
    btn.title = type.toUpperCase(type);
  }

  function playPause (i) {
    var btn  = BUTTON[i];
    var anim = ANIMATION[i];

    if (btn.classList.contains('play')) {
      anim.style.animationPlayState = 'running';
      toggleButton(btn, 'pause');
    } else if (btn.classList.contains('pause')) {
      anim.style.animationPlayState = 'paused';
      toggleButton(btn, 'play');
    } else {
      anim.classList.remove('a' + (i + 1));
      setTimeout(function () {
        toggleButton(btn, i === 0 ? 'play' : 'pause');
        anim.style.animationPlayState = '';
        anim.classList.add('a' + (i + 1));
      }, 100)
    }
  }

  ANIMATION.forEach(function (node, index) {
    node.addEventListener('animationstart', function () { toggleButton(BUTTON[index], 'pause');   });
    node.addEventListener('animationend',   function () { toggleButton(BUTTON[index], 'restart'); });
  });

  BUTTON.forEach(function (btn, index) {
    btn.addEventListener('click', function () { playPause(index); });
  });
})</pre>
</div>

<p>{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}</p>

<p><a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">Une liste des propriétés qui peuvent être animées</a> est disponible. On notera que cette liste est également valable pour <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">les transitions CSS</a>.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<p>La propriété <code>animation</code> se définit grâce à une ou plusieurs animations, séparées par des virgules.</p>

<p>Chaque animation se définit comme :</p>

<ul>
 <li>zéro ou une valeur du type :
  <ul>
   <li>{{cssxref("&lt;single-transition-timing-function&gt;")}}</li>
   <li>{{cssxref("animation", "&lt;single-animation-iteration-count&gt;", "#&lt;single-animation-iteration-count&gt;")}}</li>
   <li>{{cssxref("animation", "&lt;single-animation-direction&gt;", "#&lt;single-animation-direction&gt;")}}</li>
   <li>{{cssxref("animation", "&lt;single-animation-fill-mode&gt;", "#&lt;single-animation-fill-mode&gt;")}}</li>
   <li>{{cssxref("animation", "&lt;single-animation-play-state&gt;", "#&lt;single-animation-play-state&gt;")}} </li>
  </ul>
 </li>
 <li>un nom optionnel pour l'animation ; celui-ci peut être le mot-clé <code>none</code>, un identifiant ({{cssxref("&lt;custom-ident&gt;")}}) ou une chaîne de caractères ({{cssxref("&lt;string&gt;")}})</li>
 <li>zéro, une ou deux valeurs de type {{cssxref("&lt;time&gt;")}}</li>
</ul>

<p>L'ordre des valeurs est important : la première valeur qui peut être analysée comme une valeur de type {{cssxref("&lt;time&gt;")}} sera affectée à {{cssxref("animation-duration")}} et la deuxième à {{cssxref("animation-delay")}}.</p>

<p>L'ordre des valeurs est également important pour chaque définition d'animation afin d'identifier la valeur de {{cssxref("animation-name")}} parmi les autres mots-clés. Lors de l'analyse de la déclaration, les mots-clés valides pour d'autres propriétés que {{cssxref("animation-name")}} et dont les valeurs n'ont pas été trouvées avant doivent être affectés à ces différentes propriétés et non à {{cssxref("animation-name")}}. De plus, lors de la sérialisation, les valeurs par défaut doivent être expliciter autant que nécessaire pour distinguer une valeur pour {{cssxref("animation-name")}} qui pourrait être une valeur pour une autre propriété.</p>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>&lt;single-animation-iteration-count&gt;</code></dt>
 <dd>Le nombre de fois où l'animation est jouée, cf.  {{cssxref("animation-iteration-count")}}.</dd>
 <dt><code>&lt;single-animation-direction&gt;</code></dt>
 <dd>La direction dans laquelle s'effectue l'animation, cf. {{cssxref("animation-direction")}}.</dd>
 <dt><code>&lt;single-animation-fill-mode&gt;</code></dt>
 <dd>La façon dont les styles sont appliquées à la cible de l'animation, avant et après son exécution, cf. {{cssxref("animation-fill-mode")}}.</dd>
 <dt><code>&lt;single-animation-play-state&gt;</code></dt>
 <dd>Si l'animation est lancée ou non, cf. {{cssxref("animation-play-state")}}.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Exemples">Exemples</h2>

<div class="note">
<p><strong>Note :</strong> D'autres exemples sont disponibles sur la page <a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Manipuler les animations CSS</a>.</p>
</div>

<h3 id="Vue_laser">Vue laser</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div class="view_port"&gt;
  &lt;div class="polling_message"&gt;
    En attente
  &lt;/div&gt;
  &lt;div class="cylon_eye"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">.polling_message {
  color: white;
  float: left;
  margin-right: 2%;
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
</pre>

<h4 id="Résultat">Résultat</h4>

<p>{{EmbedLiveSample('Vue_laser')}}</p>

<h2 id="Accessibilité">Accessibilité</h2>

<p>Les animations qui clignotent ou scintillent sont problématiques et notamment pour les personnes souffrant de problèmes cognitifs. De plus, certains types de mouvement peuvent déclencher des désordres vestibulaires, des épilepsies, des migraines ou une sensibilité scotopique.</p>

<p>Veillez à fournir un mécanisme qui permette d'interrompre ou de désactiver l'animation ainsi qu'à utiliser <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">une requête média avec <code>prefers-reduced-motion</code></a> pour les mouvements réduits afin d'obtenir une ergonomie complémentaire pour les personnes souhaitant ne pas avoir d'animations.</p>

<ul>
 <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity"><em>Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article</em> (en anglais)</a></li>
 <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/"><em>An Introduction to the Reduced Motion Media Query - CSS-Tricks</em> (en anglais)</a></li>
 <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/"><em>Responsive Design for Motion - WebKit</em> (en anglais)</a></li>
 <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">Comprendre les règles WCAG 2.2</a></li>
 <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 - W3C Understanding WCAG 2.0 (en anglais)</a></em></li>
</ul>

<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', 'animation')}}</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">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("css.properties.animation")}}</p>

<h3 id="Notes_relatives_à_Quantum_(Firefox)">Notes relatives à Quantum (Firefox)</h3>

<ul>
 <li>Gecko possède un bug qui fait que lorsqu'on anime un élément en dehors de l'écran pour le faire apparaître à l'écran après une durée donnée, il n'effectue pas de <em>repaint</em> sur certaines plateformes (par exemple Windows, cf. ({{bug(1383239)}})). Ce problème a été corrigé avec le nouveau moteur de rendu CSS, <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57.</li>
 <li>Un autre bug empêche d'ouvrir les éléments {{htmlelement("details")}} par défaut avec l'attribut <code>open</code> si ceux-ci sont animés (cf. {{bug(1382124)}}). Cet autre point est également résolu avec Stylo.</li>
 <li>Un autre bug ne répercute pas les modifications de {{cssxref("font-size")}} sur les animations qui utilisent l'unité <code>em</code> pour l'élément parent (cf. {{bug(1254424)}}). Stylo règle ce problème.</li>
</ul>

<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", "AnimationEvent")}}</li>
</ul>