Hantering av Animationslägen i CSS
animation-fill-mode-egenskapen
Vi kan styra elementets stilar före och efter att animationen körs. animation-fill-mode
anger om ett element ska behålla sitt slutliga tillstånd från animationen eller återgå till sitt ursprungliga tillstånd.
animation-fill-mode: none | forwards | backwards | both
none
– Detta är standardvärdet. Animationen påverkar inte elementets utseende före eller efter animationen. Elementet ser ut som det gjorde från början;forwards
– Det innebär att stilarna vid slutet av animationen kommer att finnas kvar för elementet, och det återgår inte till sitt ursprungliga utseende;backwards
– Det innebär att elementet får de stilar som anges i början av animationen. Även om animationen triggas vid hover eller har någon fördröjning;both
– Kombinerarbackwards
ochforwards
. Det innebär att innan animationen körs får elementet de stilar som anges vid animationens start. Efter att animationen körts får elementet de stilar som anges vid animationens slut.
Låt oss titta på följande exempel för att se skillnaden mellan värdena. Det är gjort för att visa att elementets tillstånd aldrig kommer att ändras om vi har tillämpat animation-fill-mode
med rätt värde. Efter att koden körts kommer elementens slutliga tillstånd att vara oföränderliga. Om vi behöver se animationen igen, vänligen ladda om sidan.
index.html
index.css
animation-play-state-egenskap
Vi kan kontrollera animationens uppspelningsläge. Den kan pausas eller köras.
animation-play-state: running | paused
running
– Detta är standardvärdet. Startar eller återupptar animationen;paused
– Stoppar animationen i dess nuvarande tillstånd.
Vi kan titta på följande exempel, där vi stoppar den oändliga animationen vid hovring med markören.
index.html
index.css
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 2.04
Hantering av Animationslägen i CSS
Svep för att visa menyn
animation-fill-mode-egenskapen
Vi kan styra elementets stilar före och efter att animationen körs. animation-fill-mode
anger om ett element ska behålla sitt slutliga tillstånd från animationen eller återgå till sitt ursprungliga tillstånd.
animation-fill-mode: none | forwards | backwards | both
none
– Detta är standardvärdet. Animationen påverkar inte elementets utseende före eller efter animationen. Elementet ser ut som det gjorde från början;forwards
– Det innebär att stilarna vid slutet av animationen kommer att finnas kvar för elementet, och det återgår inte till sitt ursprungliga utseende;backwards
– Det innebär att elementet får de stilar som anges i början av animationen. Även om animationen triggas vid hover eller har någon fördröjning;both
– Kombinerarbackwards
ochforwards
. Det innebär att innan animationen körs får elementet de stilar som anges vid animationens start. Efter att animationen körts får elementet de stilar som anges vid animationens slut.
Låt oss titta på följande exempel för att se skillnaden mellan värdena. Det är gjort för att visa att elementets tillstånd aldrig kommer att ändras om vi har tillämpat animation-fill-mode
med rätt värde. Efter att koden körts kommer elementens slutliga tillstånd att vara oföränderliga. Om vi behöver se animationen igen, vänligen ladda om sidan.
index.html
index.css
animation-play-state-egenskap
Vi kan kontrollera animationens uppspelningsläge. Den kan pausas eller köras.
animation-play-state: running | paused
running
– Detta är standardvärdet. Startar eller återupptar animationen;paused
– Stoppar animationen i dess nuvarande tillstånd.
Vi kan titta på följande exempel, där vi stoppar den oändliga animationen vid hovring med markören.
index.html
index.css
Tack för dina kommentarer!