Propriété CSS animation-play-state

La propriété CSS animation-play-state spécifie si l'animation est en cours d'exécution ou mise en pause. Si vous reprends une animation mise en pause, elle reprendra exactement là où elle s'était arrêtée au moment de la pause, plutôt que de recommencer depuis le début de la séquence. De plus, vous pouvez lancer une animation directement depuis un état mis en pause.

Lorsque plusieurs valeurs séparées par des virgules sont spécifiées pour une propriété d'animation quelconque, elles seront associées différemment aux animations définies dans animation-name.

La propriété animation-play-state fait partie des propriétés CSS3.

En JavaScript, cette propriété peut être utilisée pour mettre en pause l'animation en plein milieu d'un cycle.

Valeur initiale	running
S'applique à	Tous les éléments. S'applique également aux pseudo-éléments ::before et ::after.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.animationPlayState = "paused";

Syntaxe

Syntaxe de la propriété CSS animation-play-state

css

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

Exemple de la propriété animation-play-state avec la valeur "running" :

Exemple de la propriété CSS animation-play-state avec la valeur running

html

<!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>

Try it Yourself »

Dans l'exemple suivant, l'animation s'arrêtera au survol.

Exemple de la propriété animation-play-state avec la valeur "paused" :

Exemple de la propriété CSS animation-play-state avec la valeur paused

html

<!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>

Try it Yourself »

Valeurs

Valeur	Description	Jouer
running	Valeur par défaut lorsque l'animation est en cours d'exécution.	Jouer »
paused	L'animation est mise en pause.	Jouer »
initial	Définit la propriété sur sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Que fait la propriété CSS 'animation-play-state' ?

Elle spécifie si l'animation est en cours d'exécution ou mise en pause.Elle détermine la vitesse de l'animation.Elle transmet l'effet d'animation à ses éléments enfants.Elle définit la couleur de l'animation.Elle redémarre l'animation lorsqu'elle est définie sur 'running' depuis un état 'paused'.

Propriété CSS animation-play-state ​

Syntaxe ​

Exemple de la propriété animation-play-state avec la valeur "running" : ​

Exemple de la propriété animation-play-state avec la valeur "paused" : ​