CSS-Eigenschaft animation-play-state

Die CSS-Eigenschaft animation-play-state gibt an, ob die Animation läuft oder angehalten wird. Wenn Sie eine angehaltene Animation fortsetzen, beginnt sie dort, wo sie zum Zeitpunkt der Unterbrechung gestoppt wurde, und nicht am Anfang der Animationssequenz. Außerdem können Sie die Animation aus dem Pausenzustand starten.

Anfangswert running
Gilt für Alle Elemente. Es gilt auch für die Pseudo-Elemente ::before und ::after.
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.animationPlayState = "paused";

Syntax

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

Beispiel

<!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>Beispiel für animation-play-state</h2>
    <p>Hier ist animation-play-state auf "running" gesetzt.</p>
    <div></div>
  </body>
</html>

Hier sehen Sie ein Beispiel, wo der Wert "paused" verwendet wird. Die Animation wird gestoppt, wenn Sie mit der Maus bewegen.

Beispiel

<!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>Bewegen Sie den Mauszeiger über die grüne Box, um die Animation zu stoppen.</p>
    <div></div>
  </body>
</html>

Werte

Wert Beschreibung
running Es ist der Standardwert, wenn die Animation ausgeführt wird.
paused Die Animation wird angehalten.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
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-

Übe dein Wissen

Was ist die Ursache, dass die CSS-Animation mit der Eigenschaft 'animation-play-state' angehalten wird?
Finden Sie das nützlich?