Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilitä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.
| Initialwert | running |
|---|---|
| Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
| Vererbt | Nein |
| Medien | visuell |
| Berechneter Wert | wie angegeben |
| Animierbar | Nein |
| Kanonische Reihenfolge | die 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
| 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 | ? | ? | ? | ? | ? | ? | ? |