Propriété CSS animation-play-state

La propriété CSS animation-play-state indique, si l’animation est en cours ou en pause. Si on reprend l'animation qui est en pause, elle va commencer là où elle a été laissée en étant mise en pause, et pas du début. On peut également jouer l'animation de l'état en pause.

Valeur initiale running
Appliquée à Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::before et ::after
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.animationPlayState = "paused";

Syntaxe

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

Exemple

<!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>Exemple de animation-play-state</h2>
    <p>Ici animation-play-state est définie comme "running".</p>
    <div></div>
  </body>
</html>

Voici un exemple, où la valeur "paused" est utilisée.

Exemple

<!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>Survolez la souris sur la boîte verte pour arrêter l'animation.</p>
    <div></div>
  </body>
</html>

Valeurs

Valeur Description
running C'est la valeur initiale. Indique, que l’animation est en cours.
paused L'animation est suspendue.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-


Trouvez-vous cela utile?

Articles Associées