Animatiestatussen Beheren in CSS
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 combineertbackwards
enforwards
. 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.
index.html
index.css
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.
index.html
index.css
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 2.04
Animatiestatussen Beheren in CSS
Veeg om het menu te tonen
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 combineertbackwards
enforwards
. 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.
index.html
index.css
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.
index.html
index.css
Bedankt voor je feedback!