#animation-play-state
Legt fest, ob eine Animation abgespielt wird oder nicht.
default
animation-play-state: running;
Wenn die Animationsdauer
und der Animationsname
definiert sind, wird die Animation automatisch abgespielt.
animation-play-state: paused;
Die Animation wird am ersten Schlüsselbild angehalten.
Das ist ein Unterschied zu animation-duration
oder animation-name
, die gar nicht vorhanden sind. Wenn die Animation angehalten wird, wird der Stil des ersten Keyframes angewendet und nicht der Standardstil.
In diesem Beispiel ist das Quadrat standardmäßig sichtbar, aber beim ersten Schlüsselbild von fadeAndMove
wird die opacity
auf 0
gesetzt. Wenn die Animation angehalten wird, bleibt sie an diesem ersten Schlüsselbild „hängen“ und ist somit unsichtbar.
@keyframes fadeAndMove { from { opacity: 0; transform: translateX(0); } to { opacity: 0; transform: translateX(100px); } }
Letzte Artikel von Redaktion (Alle anzeigen)
- Virtuelle private Netzwerke (VPN): Was steckt hinter dieser Technologie? - 30. August 2022