Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Hantering av Animationslägen i CSS | Avancerade CSS-animationer
Avancerade CSS-tekniker

bookHantering 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 – Kombinerar backwards och forwards. 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Vad är syftet med egenskapen animation-fill-mode?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 4

Fråga AI

expand

Fråga AI

ChatGPT

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

bookHantering 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 – Kombinerar backwards och forwards. 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Vad är syftet med egenskapen animation-fill-mode?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 4
some-alt