Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Verwalten von Animationszuständen in CSS | Fortgeschrittene CSS-Animationen
Fortgeschrittene CSS-Techniken

bookVerwalten 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 aus backwards und forwards. 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Was ist der Zweck der Eigenschaft animation-fill-mode?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 4

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.04

bookVerwalten 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 aus backwards und forwards. 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Was ist der Zweck der Eigenschaft animation-fill-mode?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 4
some-alt