CSS animation-play-state-Eigenschaft

Die CSS-Eigenschaft animation-play-state legt fest, ob die Animation läuft oder pausiert ist. Wenn Sie eine pausierte Animation fortsetzen, startet sie dort weiter, wo sie unterbrochen wurde, anstatt von vorne zu beginnen. Außerdem können Sie eine Animation auch aus dem Pausenzustand heraus starten.

Wenn mehrere durch Kommas getrennte Werte für eine beliebige Animationseigenschaft angegeben werden, werden sie unterschiedlich den Animationen zugeordnet, die in animation-name definiert sind.

Die Eigenschaft animation-play-state ist eine der CSS3-Eigenschaften.

In JavaScript kann diese Eigenschaft verwendet werden, um die Animation mitten im Zyklus zu pausieren.

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

Syntax

Syntax der CSS animation-play-state-Eigenschaft

css

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

Beispiel für die animation-play-state-Eigenschaft mit dem Wert "running":

Beispiel für die CSS animation-play-state-Eigenschaft mit dem Wert 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 »

Im folgenden Beispiel stoppt die Animation, wenn Sie mit der Maus darüber fahren.

Beispiel für die animation-play-state-Eigenschaft mit dem Wert "paused":

Beispiel für die CSS animation-play-state-Eigenschaft mit dem Wert 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 »

Werte

Wert	Beschreibung	Abspielen
running	Standardwert, wenn die Animation läuft.	Abspielen »
paused	Die Animation ist pausiert.	Abspielen »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Practice

Was bewirkt die CSS-Eigenschaft 'animation-play-state'?

Sie legt fest, ob die Animation läuft oder pausiert ist.Sie bestimmt die Geschwindigkeit der Animation.Sie überträgt den Animationseffekt auf ihre Kindelemente.Sie definiert die Farbe der Animation.Sie startet die Animation neu, wenn sie von einem 'paused'-Zustand auf 'running' gesetzt wird.

CSS animation-play-state-Eigenschaft ​

Syntax ​

Beispiel für die animation-play-state-Eigenschaft mit dem Wert "running": ​

Beispiel für die animation-play-state-Eigenschaft mit dem Wert "paused": ​