CSS-Eigenschaft animation-play-state

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.