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.

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.