Verwalten von Animationszuständen in CSS
animation-fill-mode Eigenschaft
Mit dieser Eigenschaft können die Stilregeln eines Elements vor und nach dem Ablauf einer Animation gesteuert werden. animation-fill-mode
legt fest, ob ein Element seinen Endzustand aus der Animation beibehalten oder in den Ursprungszustand zurückkehren soll.
animation-fill-mode: none | forwards | backwards | both
none
– Standardwert. Die Animation beeinflusst das Element weder vor noch nach dem Ablauf. Das Element bleibt unverändert;forwards
– Die Stile am Ende der Animation bleiben für das Element erhalten, es kehrt nicht in den Anfangszustand zurück;backwards
– Das Element erhält die zu Beginn der Animation definierten Stile, auch wenn die Animation beispielsweise durch Hover ausgelöst wird oder eine Verzögerung besitzt;both
– Kombination ausbackwards
undforwards
. Vor dem Start erhält das Element die Anfangsstile der Animation, nach dem Ablauf die Endstile.
Betrachten wir das folgende Beispiel, um den Unterschied zwischen den Werten zu verdeutlichen. Es zeigt, dass sich der Zustand eines Elements nicht mehr ändert, wenn animation-fill-mode
mit dem passenden Wert angewendet wurde. Nach dem Ausführen des Codes bleibt der Endzustand der Elemente unveränderlich. Um die Animation erneut zu sehen, bitte die Seite neu laden.
index.html
index.css
animation-play-state Eigenschaft
Die Animationswiedergabe kann gesteuert werden. Sie kann pausiert oder ausgeführt werden.
animation-play-state: running | paused
running
– Dies ist der Standardwert. Startet oder setzt die Animation fort;paused
– Hält die Animation im aktuellen Zustand an.
Betrachten wir das folgende Beispiel, in dem die unendliche Animation beim Überfahren mit dem Cursor gestoppt wird.
index.html
index.css
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.04
Verwalten von Animationszuständen in CSS
Swipe um das Menü anzuzeigen
animation-fill-mode Eigenschaft
Mit dieser Eigenschaft können die Stilregeln eines Elements vor und nach dem Ablauf einer Animation gesteuert werden. animation-fill-mode
legt fest, ob ein Element seinen Endzustand aus der Animation beibehalten oder in den Ursprungszustand zurückkehren soll.
animation-fill-mode: none | forwards | backwards | both
none
– Standardwert. Die Animation beeinflusst das Element weder vor noch nach dem Ablauf. Das Element bleibt unverändert;forwards
– Die Stile am Ende der Animation bleiben für das Element erhalten, es kehrt nicht in den Anfangszustand zurück;backwards
– Das Element erhält die zu Beginn der Animation definierten Stile, auch wenn die Animation beispielsweise durch Hover ausgelöst wird oder eine Verzögerung besitzt;both
– Kombination ausbackwards
undforwards
. Vor dem Start erhält das Element die Anfangsstile der Animation, nach dem Ablauf die Endstile.
Betrachten wir das folgende Beispiel, um den Unterschied zwischen den Werten zu verdeutlichen. Es zeigt, dass sich der Zustand eines Elements nicht mehr ändert, wenn animation-fill-mode
mit dem passenden Wert angewendet wurde. Nach dem Ausführen des Codes bleibt der Endzustand der Elemente unveränderlich. Um die Animation erneut zu sehen, bitte die Seite neu laden.
index.html
index.css
animation-play-state Eigenschaft
Die Animationswiedergabe kann gesteuert werden. Sie kann pausiert oder ausgeführt werden.
animation-play-state: running | paused
running
– Dies ist der Standardwert. Startet oder setzt die Animation fort;paused
– Hält die Animation im aktuellen Zustand an.
Betrachten wir das folgende Beispiel, in dem die unendliche Animation beim Überfahren mit dem Cursor gestoppt wird.
index.html
index.css
Danke für Ihr Feedback!