Docs CSS exécutables : Animation CSS

Q: Comment créer une animation en CSS ?

Définissez les étapes avec @keyframes name { from { ... } to { ... } }, puis appliquez-les à un élément avec la propriété animation et une durée : animation: name 1s ease-out;. La durée est obligatoire, car sa valeur par défaut est 0s.

Q: Comment faire tourner une animation CSS en boucle ?

Définissez animation-iteration-count: infinite, ou ajoutez infinite au raccourci : animation: spin 1s linear infinite;. Ajoutez alternate pour la jouer à l'endroit puis à l'envers à chaque cycle.

Q: Comment mettre en pause une animation CSS ?

Définissez animation-play-state: paused sur l'élément, par exemple au :hover ou via une classe ajoutée par JavaScript. Remettre running reprend là où elle s'était arrêtée.

Q: Comment désactiver les animations pour les utilisateurs qui préfèrent moins de mouvement ?

Entourez l'animation de @media (prefers-reduced-motion: no-preference) { ... }, ou supprimez-la dans @media (prefers-reduced-motion: reduce) { ... }. La requête suit le réglage de réduction des animations du système d'exploitation de l'utilisateur.

Une animation CSS en un exemple

Une animation a deux parties : @keyframes, qui décrit les étapes, et la propriété animation, qui les applique à un élément avec une durée. Cette carte glisse et apparaît en fondu au chargement de la page :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS animation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide-in {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .card {
      padding: 16px;
      border-radius: 8px;
      background: #2563eb;
      color: white;
      animation: slide-in 0.6s ease-out both;
    }
    /* Keep only the fade for people who asked for less motion */
    @media (prefers-reduced-motion: reduce) {
      @keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
    }
  </style>
</head>
<body>
  <div class="card">Hello! This card animated in.</div>
</body>
</html>

Modifiez le code (ou passez la durée à 2s) et l'aperçu se recharge, pour que vous voyiez la carte arriver de nouveau. Le bloc @media (prefers-reduced-motion: reduce) remplace les keyframes par un simple fondu, uniquement pour les lecteurs dont le système est réglé pour réduire les animations.

La syntaxe @keyframes

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

from équivaut à 0% et to à 100%.
Ajoutez autant d'étapes en pourcentage que nécessaire. Des étapes aux styles identiques peuvent partager une ligne : 0%, 100% { ... }.
Une propriété absente de la première ou de la dernière keyframe est animée depuis ou vers la valeur propre de l'élément.
Le nom (pulse) est ce que vous passez à animation-name. Il est sensible à la casse et ne doit pas être un mot-clé comme none.

Les propriétés d'animation

Propriété	Ce qu'elle définit	Par défaut
`animation-name`	quelles `@keyframes` exécuter	`none`
`animation-duration`	la durée d'un cycle	`0s`
`animation-timing-function`	la courbe de vitesse entre les keyframes	`ease`
`animation-delay`	l'attente avant le premier cycle (une valeur négative démarre en cours de route)	`0s`
`animation-iteration-count`	le nombre de cycles, ou `infinite`	`1`
`animation-direction`	`normal`, `reverse`, `alternate`, `alternate-reverse`	`normal`
`animation-fill-mode`	les styles avant et après : `none`, `forwards`, `backwards`, `both`	`none`
`animation-play-state`	`running` ou `paused`	`running`

Le raccourci les accepte dans presque n'importe quel ordre. La seule règle est que la première durée est la durée du cycle et la seconde le délai :

.loader {
  animation: pulse 1.2s ease-in-out 0.2s infinite alternate both;
  /*         name  duration timing  delay count   direction fill */
}

direction et fill-mode, en direct

Choisissez une direction, un fill-mode et un nombre de cycles, puis appuyez sur Play. La boîte parcourt 200px jusqu'au bout de la piste. L'affichage indique où elle s'est arrêtée à la fin de l'animation :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>direction and fill-mode</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    @keyframes move {
      from { transform: translateX(0); background: #2563eb; }
      to   { transform: translateX(200px); background: #16a34a; }
    }
    .track { width: 240px; background: #f3f4f6; margin: 10px 0; }
    #box { width: 40px; height: 40px; background: #f59e0b; }
    .controls { display: flex; flex-wrap: wrap; gap: 10px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>direction <select id="dir"><option>normal</option><option>reverse</option><option>alternate</option></select></label>
    <label>fill-mode <select id="fill"><option>none</option><option>forwards</option><option>backwards</option><option>both</option></select></label>
    <label>count <select id="count"><option>1</option><option>2</option></select></label>
    <button id="play">Play</button>
  </div>
  <div class="track"><div id="box"></div></div>
  <p id="out">The amber color is the box's own style, used whenever no keyframe applies.</p>
  <script>
    const box = document.getElementById('box');
    const val = (id) => document.getElementById(id).value;
    document.getElementById('play').addEventListener('click', () => {
      box.style.animation = 'none';
      box.offsetWidth; // restart: let the browser see the animation removed
      box.style.animation = 'move 1s ease-in-out ' + val('count') + ' ' + val('dir') + ' ' + val('fill');
    });
    box.addEventListener('animationend', () => {
      const x = new DOMMatrix(getComputedStyle(box).transform).m41;
      document.getElementById('out').textContent = 'Finished at x = ' + Math.round(x) + 'px, color ' + getComputedStyle(box).backgroundColor;
    });
  </script>
</body>
</html>

À observer :

fill-mode: none (par défaut) : après la dernière image, la boîte revient d'un coup à x = 0 et redevient ambre.
forwards : elle reste sur la dernière keyframe. Avec normal, c'est x = 200 et vert ; avec reverse, elle finit à x = 0 et bleue, car la dernière keyframe jouée était from.
alternate avec un nombre de 2 fait l'aller et le retour, donc même forwards se termine à x = 0.

Boucles infinies : un indicateur de chargement

infinite répète indéfiniment, et un animation-delay sur chaque enfant les décale pour qu'ils bougent chacun leur tour. Gardez des boucles calmes : lentes, petites, sans clignotement.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Loading dots</title>
  <style>
    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
      40%           { transform: scale(1);   opacity: 1; }
    }
    .dots { display: flex; gap: 8px; padding: 12px; }
    .dots span {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #2563eb;
      animation: bounce 1.4s ease-in-out infinite;
    }
    .dots span:nth-child(2) { animation-delay: 0.2s; }
    .dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes fade {
      0%, 80%, 100% { opacity: 0.4; }
      40%           { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .dots span { animation-name: fade; } /* no size change, only a soft fade */
    }
  </style>
</head>
<body>
  <div class="dots" role="status" aria-label="Loading"><span></span><span></span><span></span></div>
</body>
</html>

role="status" avec un aria-label indique aux utilisateurs de lecteurs d'écran qu'un chargement est en cours, ce que les points seuls ne disent pas. Pour un cercle qui tourne, voir la page rotation.

Mettre en pause et contrôler les animations

animation-play-state: paused fige une animation là où elle en est, et running la fait repartir de là. Survolez la barre ci-dessous pour la mettre en pause :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pause on hover</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    @keyframes slide {
      from { transform: translateX(0); }
      to   { transform: translateX(260px); }
    }
    .track { width: 300px; padding: 6px 0; background: #f3f4f6; }
    .bar { width: 40px; height: 24px; border-radius: 4px; background: #16a34a; animation: slide 3s ease-in-out infinite alternate; }
    .track:hover .bar { animation-play-state: paused; }
  </style>
</head>
<body>
  <div class="track"><div class="bar"></div></div>
  <p>Hover the gray track to pause.</p>
</body>
</html>

Depuis JavaScript, element.getAnimations() renvoie les animations CSS en cours, chacune avec pause(), play(), cancel() et un currentTime que vous pouvez lire ou modifier. L'événement animationend se déclenche quand une animation non infinie se termine, et animationiteration à la fin de chaque cycle.

Respecter la réduction des animations et ne jamais clignoter

Deux règles d'accessibilité s'appliquent à toutes les animations :

Réduction des animations. Les gens peuvent demander à leur système moins de mouvement, car il les rend malades. Le schéma le plus sûr n'ajoute du mouvement que s'ils n'ont pas demandé à en avoir moins :

@media (prefers-reduced-motion: no-preference) {
  .hero-title { animation: slide-in 0.8s ease-out both; }
}

Pas de clignotement. Un contenu qui clignote plus de trois fois par seconde peut déclencher des crises d'épilepsie. Évitez complètement les clignotements rapides et très contrastés.

Des animations fluides

Animez transform et opacity quand c'est possible. Le navigateur peut les appliquer sans recalculer la mise en page, elles restent donc fluides même sur les téléphones lents. Animer width, height, top, left ou margin recalcule la mise en page à chaque image. Pour déplacer un élément, utilisez translate() de la page transform.

Erreurs courantes

Pas de durée. animation: fade; ne fait rien, car la durée par défaut est 0s.
Un nom qui ne correspond pas. animation-name doit correspondre exactement au nom des @keyframes, casse comprise.
Un retour brutal à la fin. Ajoutez forwards (ou both) pour garder la dernière keyframe.
Un scintillement avant le début d'une animation retardée. Pendant animation-delay, l'élément affiche ses styles normaux. backwards (ou both) applique la première keyframe pendant le délai.
Relancer une animation en redonnant la même valeur. Redéfinir le même animation ne fait rien. Retirez-le, forcez un recalcul de la mise en page (el.offsetWidth) et redéfinissez-le, comme le fait le bouton Play ci-dessus.
Animer display. Il change d'un coup. Animez plutôt opacity et transform.

Questions fréquentes

Comment créer une animation en CSS ?

Définissez les étapes avec @keyframes name { from { ... } to { ... } }, puis appliquez-les à un élément avec la propriété animation et une durée : animation: name 1s ease-out;. La durée est obligatoire, car sa valeur par défaut est 0s.

Que fait animation-fill-mode: forwards ?

Il garde les styles de la dernière keyframe à la fin de l'animation. Sans lui, l'élément revient d'un coup à ses styles normaux. backwards applique la première keyframe pendant le délai, et both fait les deux.

Comment faire tourner une animation CSS en boucle ?

Définissez animation-iteration-count: infinite, ou ajoutez infinite au raccourci : animation: spin 1s linear infinite;. Ajoutez alternate pour la jouer à l'endroit puis à l'envers à chaque cycle.

Quelle est la différence entre animation et transition en CSS ?

Une transition anime une propriété entre deux valeurs quand elle change, en général au survol ou lors d'un changement de classe. Une animation démarre seule dès qu'elle est appliquée, peut avoir autant de keyframes que nécessaire, et peut se répéter, s'inverser et se mettre en pause.

Comment mettre en pause une animation CSS ?

Définissez animation-play-state: paused sur l'élément, par exemple au :hover ou via une classe ajoutée par JavaScript. Remettre running reprend là où elle s'était arrêtée.

Comment désactiver les animations pour les utilisateurs qui préfèrent moins de mouvement ?

Entourez l'animation de @media (prefers-reduced-motion: no-preference) { ... }, ou supprimez-la dans @media (prefers-reduced-motion: reduce) { ... }. La requête suit le réglage de réduction des animations du système d'exploitation de l'utilisateur.

Concepts liés