W3docs
fr
Se connecter

Propriété CSS animation-play-state

La propriété CSS animation-play-state indique si l'animation est en cours d'exécution ou en pause. Voyez un exemple et essayez par vous-même.

La propriété CSS animation-play-state contrôle si une animation CSS est en cours d'exécution ou en pause. La basculer est la méthode standard pour démarrer et arrêter une animation sans la supprimer.

La mise en pause ne réinitialise pas la progression : lorsque vous reprenez une animation en pause, elle reprend exactement là où elle s'était arrêtée plutôt que de repartir depuis la première image-clé. Cela rend animation-play-state idéale pour les contrôles « lecture/pause » et pour stopper le mouvement lorsque l'utilisateur survole un élément ou interagit avec lui.

Cette page couvre la syntaxe de la propriété, ses valeurs acceptées, des exemples pilotés au survol et en JavaScript, ainsi que son comportement lorsque plusieurs animations s'exécutent sur le même élément.

Quand l'utiliser

  • Pause au survol — arrêter une animation en boucle (un défilement, un spinner, un carrousel) lorsque le pointeur est dessus, afin que les utilisateurs puissent lire ou interagir.
  • Boutons lecture/pause — changer la valeur depuis JavaScript en réponse à un clic, comme un lecteur multimédia bascule la lecture.
  • Différer le démarrage — déclarer une animation en la commençant paused, puis la passer à running plus tard lorsqu'une condition est remplie (un élément défile dans la vue, le chargement des données est terminé, etc.).

La propriété est l'une des propriétés d'animation CSS3 et fait partie du raccourci animation, aux côtés de animation-name, animation-duration et animation-iteration-count.

Animations multiples

Lorsque vous affectez plusieurs animations séparées par des virgules à un même élément, chaque valeur animation-play-state s'aligne, dans l'ordre, avec l'animation à la même position dans animation-name. Par exemple, animation-play-state: paused, running met en pause la première animation et exécute la seconde. Si vous listez moins d'états que de noms, les valeurs sont répétées pour couvrir le reste.

Valeur initialerunning
S'applique àTous les éléments. S'applique également aux pseudo-éléments ::before et ::after.
HéritéNon.
AnimableNon.
VersionCSS3
Syntaxe DOMobject.style.animationPlayState = "paused";

Syntaxe

animation-play-state: paused | running | initial | inherit;

Exemples

La valeur « running »

running est la valeur par défaut, donc cet exemple se comporte de la même façon avec ou sans la déclaration — le bloc se déplace une fois sur 10 secondes :

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #ccc;
        position: relative;
        animation: play 10s;
        animation-play-state: running;
      }
      @keyframes play {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-play-state example</h2>
    <p>Here the animation-play-state is set to "running".</p>
    <div></div>
  </body>
</html>
Essayez vous-même »

Pause au survol avec la valeur « paused »

Ici, une animation en boucle est mise en pause lorsque le pointeur se trouve sur le bloc. Comme la mise en pause conserve la progression actuelle, le bloc se fige en place et reprend depuis le même endroit lorsque vous éloignez le pointeur :

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        position: relative;
        animation: play 1s infinite;
      }
      div:hover {
        animation-play-state: paused;
      }
      @keyframes play {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <p>Hover over the green box to stop the animation.</p>
    <div></div>
  </body>
</html>
Essayez vous-même »

Basculer lecture/pause avec JavaScript

Vous pouvez lire ou définir la valeur depuis un script via la propriété animationPlayState de l'objet style d'un élément. Voici comment fonctionne un bouton lecture/pause :

<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        position: relative;
        animation: play 1s infinite;
        animation-play-state: paused;
      }
      @keyframes play {
        from { left: 0px; }
        to { left: 200px; }
      }
    </style>
  </head>
  <body>
    <button id="toggle">Play</button>
    <div id="box"></div>
    <script>
      const box = document.getElementById("box");
      const button = document.getElementById("toggle");
      button.addEventListener("click", () => {
        const paused =
          getComputedStyle(box).animationPlayState === "paused";
        box.style.animationPlayState = paused ? "running" : "paused";
        button.textContent = paused ? "Pause" : "Play";
      });
    </script>
  </body>
</html>

L'animation démarre en paused, donc rien ne bouge jusqu'à ce que l'utilisateur clique sur le bouton. Chaque clic bascule l'état et met à jour le libellé du bouton.

Valeurs

La propriété accepte un seul mot-clé (ou une liste séparée par des virgules, une par animation) :

ValeurDescriptionL'essayer
runningValeur par défaut lorsque l'animation est en cours d'exécution.Play it »
pausedL'animation est en pause.Play it »
initialDéfinit la propriété à sa valeur par défaut (running).
inheritHérite la propriété de son élément parent.

Compatibilité des navigateurs

animation-play-state est prise en charge par tous les navigateurs modernes — Chrome, Edge, Firefox, Safari et Opera. Elle n'est pas animable, donc la modifier prend effet immédiatement plutôt que de faire une transition entre les états.

Exercice

Pratique
Que fait la propriété CSS 'animation-play-state' ?
Que fait la propriété CSS 'animation-play-state' ?
Was this page helpful?