animation-fill-mode Eigenschaft

Wir können die Stilelemente vor und nach dem Ablauf der Animation steuern. animation-fill-mode gibt an, ob ein Element seinen Endzustand aus der Animation beibehalten oder in seinen ursprünglichen Zustand zurückkehren soll.

animation-fill-mode: none | forwards | backwards | both

• none - Dies ist der Standardwert. Die Animation beeinflusst die Ansicht des Elements vor oder nach der Animation nicht. Das Element sieht genauso aus wie ursprünglich;
• forwards - Das bedeutet, dass die Stile am Ende der Animation für das Element erhalten bleiben und es nicht zu seiner ursprünglichen Ansicht zurückkehrt;
• backwards - Das bedeutet, dass das Element die zu Beginn der Animation angegebenen Stile hat. Auch wenn die Animation bei Hover ausgelöst wird oder eine Verzögerung hat;
• both - Es kombiniert backwards und forwards. Das bedeutet, dass das Element vor dem Ablauf der Animation die zu Beginn der Animation angegebenen Stile hat. Nach dem Ablauf der Animation hat das Element die am Ende der Animation festgelegten Stile.

Betrachten wir das folgende Beispiel, um den Unterschied zwischen den Werten zu überprüfen. Es wurde erstellt, um zu zeigen, dass sich der Zustand des Elements niemals ändert, wenn wir den animation-fill-mode mit dem richtigen Wert angewendet haben. Nach dem Ausführen des Codes wird der Endzustand der Elemente unveränderlich sein. Wenn wir die Animation erneut sehen müssen, laden Sie bitte die Seite neu.

animation-play-state Eigenschaft

Wir können den Animationszustand steuern. Er kann pausiert oder laufend sein.

animation-play-state: running | paused

• running - Dies ist der Standardwert. Es startet oder setzt die Animation fort;
• paused - Es stoppt die Animation im aktuellen Zustand.

Betrachten wir das folgende Beispiel, bei dem wir die unendliche Animation beim Überfahren des Cursors stoppen.