We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.

Übersicht

Die animation-play-state CSS Eigenschaft bestimmt, ob eine Animation abläuft oder pausiert ist. Der Wert dieser Eigenschaft kann abgefragt werden, um festzustellen, ob die Animation gerade abläuft oder nicht; darüber hinaus kann der Wert auch gesetzt werden, um die das Abspielen der Animation anzuhalten und fortzusetzen.

Wenn eine pausierte Animation fortgesetzt wird, wird sie dort gestartet, wo sie angehalten wurde, nicht vom Anfang der Animationssequenz.

Initialwertrunning
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Einzelne Animation */
animation-play-state: running;
animation-play-state: paused;

/* Mehrere Animationen */
animation-play-state: paused, running, running;

/* Globale Werte */
animation-play-state: inherited;
animation-play-state: initial;
animation-play-state: unset;

Werte

running
Die Animation läuft aktuell ab.
paused
Die Animation ist aktuell pausiert.

Formale Syntax

<single-animation-play-state>#

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

Beispiele

Siehe CSS Animationen für Beispiele.

Spezifikationen

Spezifikation Status Anmerkung
CSS Animations
Die Definition von 'animation-play-state' in dieser Spezifikation.
Arbeitsentwurf Ursprüngliche Definition

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung (Ja)-webkit 5.0 (5.0)-moz
16.0 (16.0)
10 12 -o
12.10 #
(Ja)-webkit
Feature Android Chrome Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support ? ? ? ? ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Sebastianz
Zuletzt aktualisiert von: Sebastianz,