W3docs
de
Anmelden

CSS animation-play-state Eigenschaft

Die CSS animation-play-state Eigenschaft legt fest, ob eine Animation läuft oder pausiert. Beispiele und selbst ausprobieren.

Die CSS-Eigenschaft animation-play-state steuert, ob eine CSS-Animation läuft oder pausiert. Das Umschalten ist die Standardmethode, um eine Animation zu starten und zu stoppen, ohne die Animation selbst zu entfernen.

Das Pausieren setzt den Fortschritt nicht zurück: Wenn eine pausierte Animation fortgesetzt wird, läuft sie genau von dort weiter, wo sie gestoppt wurde, anstatt beim ersten Keyframe neu zu starten. Damit eignet sich animation-play-state ideal für „Play/Pause"-Steuerungen und um Bewegungen zu stoppen, während der Benutzer über ein Element schwebt oder damit interagiert.

Diese Seite behandelt die Syntax der Eigenschaft, ihre akzeptierten Werte, hover- und JavaScript-gesteuerte Beispiele sowie das Verhalten bei mehreren Animationen auf demselben Element.

Wann verwenden

  • Pause beim Hover — Eine Endlosanimation (eine Laufschrift, ein Spinner, ein Karussell) stoppen, während der Zeiger darüber liegt, damit Benutzer lesen oder interagieren können.
  • Play/Pause-Schaltflächen — Den Wert per JavaScript als Reaktion auf einen Klick umschalten, so wie ein Mediaplayer die Wiedergabe ein- und ausschaltet.
  • Start verzögern — Eine Animation als paused deklarieren und sie später auf running setzen, wenn eine Bedingung erfüllt ist (ein Element scrollt in den sichtbaren Bereich, Daten werden fertig geladen usw.).

Die Eigenschaft gehört zu den CSS3-Animationseigenschaften und ist Teil der animation-Kurzschreibweise, zusammen mit animation-name, animation-duration und animation-iteration-count.

Mehrere Animationen

Wenn einem Element mehrere durch Komma getrennte Animationen zugewiesen werden, entspricht jeder animation-play-state-Wert der Reihe nach der Animation an derselben Position in animation-name. Zum Beispiel pausiert animation-play-state: paused, running die erste Animation und lässt die zweite laufen. Werden weniger Zustände als Namen angegeben, werden die Werte wiederholt, um die übrigen zu abzudecken.

Anfangswertrunning
Gilt fürAlle Elemente. Gilt auch für die Pseudo-Elemente ::before und ::after.
VererbtNein.
AnimierbarNein.
VersionCSS3
DOM-Syntaxobject.style.animationPlayState = "paused";

Syntax

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

Beispiele

Der Wert „running"

running ist der Standardwert, daher verhält sich dieses Beispiel mit oder ohne die Deklaration gleich — das Feld gleitet einmal über 10 Sekunden:

<!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>
Probier es selbst »

Pause beim Hover mit dem Wert „paused"

Hier wird eine Endlosanimation pausiert, während der Zeiger über dem Feld liegt. Da beim Pausieren der aktuelle Fortschritt erhalten bleibt, friert das Feld an seiner aktuellen Position ein und setzt von derselben Stelle fort, wenn der Zeiger wegbewegt wird:

<!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>
Probier es selbst »

Play/Pause per JavaScript umschalten

Der Wert kann per Skript über die Eigenschaft animationPlayState des style-Objekts eines Elements gelesen oder gesetzt werden. So funktioniert eine Play/Pause-Schaltfläche:

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

Die Animation startet als paused, daher bewegt sich nichts, bis der Benutzer auf die Schaltfläche klickt. Jeder Klick schaltet den Zustand um und aktualisiert die Schaltflächenbeschriftung.

Werte

Die Eigenschaft akzeptiert ein einzelnes Schlüsselwort (oder eine durch Komma getrennte Liste, eines pro Animation):

WertBeschreibungAusprobieren
runningStandardwert, wenn die Animation läuft.Play it »
pausedDie Animation ist pausiert.Play it »
initialSetzt die Eigenschaft auf ihren Standardwert (running).
inheritErbt die Eigenschaft vom übergeordneten Element.

Browser-Unterstützung

animation-play-state wird von allen modernen Browsern unterstützt — Chrome, Edge, Firefox, Safari und Opera. Die Eigenschaft ist nicht animierbar, daher tritt eine Änderung sofort in Kraft, anstatt zwischen Zuständen zu wechseln.

Übungen

Übung
Was bewirkt die CSS-Eigenschaft 'animation-play-state'?
Was bewirkt die CSS-Eigenschaft 'animation-play-state'?
Was this page helpful?