animation-play-state

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die animation-play-state CSS Eigenschaft legt fest, ob eine Animation läuft oder pausiert ist.

Probieren Sie es aus

Wenn eine pausierte Animation fortgesetzt wird, beginnt sie an der Stelle, an der sie pausiert wurde, und nicht von vorne in der Animationssequenz.

Syntax

css
/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;

Werte

running

Die Animation ist momentan aktiv.

paused

Die Animation ist momentan pausiert.

Hinweis: Wenn Sie mehrere durch Kommas getrennte Werte für eine animation-* Eigenschaft angeben, werden diese in der Reihenfolge angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animationswerte.

Formale Definition

Initialer Wertrunning
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

animation-play-state = 
  <single-animation-play-state>#  

<single-animation-play-state> = 
  running  |
  paused

Beispiele

Eine Animation pausieren

Diese Animation ist pausiert, wird aber ausgeführt, wenn Sie darüber fahren.

HTML

html
<div class="box"></div>

CSS

css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Ergebnis

Fahren Sie mit der Maus über das Rechteck, um die Animation abzuspielen.

Siehe CSS-Animationen für Beispiele.

Spezifikationen

Specification
CSS Animations Level 1
# animation-play-state

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch