animation-fill-mode eigenschap

We kunnen de stijlen van het element vóór en na het uitvoeren van de animatie beheren. animation-fill-mode specificeert of een element zijn eindtoestand van de animatie moet behouden of moet terugkeren naar zijn oorspronkelijke staat.

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

• none - Dit is de standaardwaarde. De animatie heeft geen invloed op de weergave van het element vóór of na de animatie. Het element blijft er hetzelfde uitzien als aanvankelijk;
• forwards - Dit betekent dat de stijlen aan het einde van de animatie behouden blijven voor het element, en het niet terugkeert naar de oorspronkelijke weergave;
• backwards - Dit betekent dat het element de stijlen krijgt die aan het begin van de animatie zijn gespecificeerd. Zelfs als de animatie wordt geactiveerd bij hover of een vertraging heeft;
• both - Dit combineert backwards en forwards. Dit betekent dat vóór het uitvoeren van de animatie het element de stijlen krijgt die aan het begin van de animatie zijn gespecificeerd. Na het uitvoeren van de animatie krijgt het element de stijlen die aan het einde van de animatie zijn ingesteld.

Laten we het volgende voorbeeld bekijken om het verschil tussen de waarden te controleren. Dit voorbeeld is gemaakt om te laten zien dat de toestand van het element nooit zal veranderen als we animation-fill-mode met de juiste waarde toepassen. Na het uitvoeren van de code blijft de eindtoestand van de elementen onveranderlijk. Als we de animatie opnieuw willen zien, gelieve de pagina te herladen.

animation-play-state eigenschap

We kunnen de afspeelstatus van de animatie beheren. Deze kan gepauzeerd of actief zijn.

animation-play-state: running | paused

• running - Dit is de standaardwaarde. Start of hervat de animatie;
• paused - Stopt de animatie in de huidige staat.

Beschouw het volgende voorbeeld, waarin we de oneindige animatie stoppen bij het zweven met de cursor.