Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Håndtering av Animasjonstilstander i CSS | Avanserte CSS-animasjoner
Avanserte CSS-teknikker

bookHåndtering av Animasjonstilstander i CSS

animation-fill-mode-egenskapen

Vi kan kontrollere elementets stil før og etter at animasjonen kjøres. animation-fill-mode angir om et element skal beholde sin endelige tilstand fra animasjonen eller gå tilbake til sin opprinnelige tilstand.

animation-fill-mode: none | forwards | backwards | both
  • none – Dette er standardverdien. Animasjonen påvirker ikke elementets utseende før eller etter animasjonen. Elementet vil se ut som det gjorde opprinnelig;
  • forwards – Betyr at stilene ved slutten av animasjonen forblir på elementet, og det går ikke tilbake til sitt opprinnelige utseende;
  • backwards – Betyr at elementet får stilene som er angitt ved starten av animasjonen. Dette gjelder selv om animasjonen utløses ved hover eller har en forsinkelse;
  • both – Kombinerer backwards og forwards. Det betyr at før animasjonen starter, får elementet stilene fra starten av animasjonen. Etter at animasjonen er ferdig, får elementet stilene fra slutten av animasjonen.

La oss se på følgende eksempel for å undersøke forskjellen mellom verdiene. Eksempelet viser at elementets tilstand aldri vil endre seg hvis vi har brukt riktig verdi for animation-fill-mode. Etter at koden er kjørt, vil elementenes slutt-tilstand være uforanderlig. Hvis vi ønsker å se animasjonen på nytt, må siden lastes inn på nytt.

index.html

index.html

index.css

index.css

copy

animation-play-state-egenskapen

Vi kan kontrollere animasjonens avspillingsstatus. Den kan være satt til pause eller kjøre.

animation-play-state: running | paused
  • running – Dette er standardverdien. Starter eller gjenopptar animasjonen;
  • paused – Stopper animasjonen i gjeldende tilstand.

Vi ser på følgende eksempel, hvor vi stopper den uendelige animasjonen når markøren holdes over elementet.

index.html

index.html

index.css

index.css

copy
question mark

Hva er formålet med egenskapen animation-fill-mode

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 4

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you explain the difference between `animation-fill-mode` values with examples?

How does `animation-play-state` interact with user actions like hover?

Can you provide a practical use case for combining `animation-fill-mode` and `animation-play-state`?

Awesome!

Completion rate improved to 2.04

bookHåndtering av Animasjonstilstander i CSS

Sveip for å vise menyen

animation-fill-mode-egenskapen

Vi kan kontrollere elementets stil før og etter at animasjonen kjøres. animation-fill-mode angir om et element skal beholde sin endelige tilstand fra animasjonen eller gå tilbake til sin opprinnelige tilstand.

animation-fill-mode: none | forwards | backwards | both
  • none – Dette er standardverdien. Animasjonen påvirker ikke elementets utseende før eller etter animasjonen. Elementet vil se ut som det gjorde opprinnelig;
  • forwards – Betyr at stilene ved slutten av animasjonen forblir på elementet, og det går ikke tilbake til sitt opprinnelige utseende;
  • backwards – Betyr at elementet får stilene som er angitt ved starten av animasjonen. Dette gjelder selv om animasjonen utløses ved hover eller har en forsinkelse;
  • both – Kombinerer backwards og forwards. Det betyr at før animasjonen starter, får elementet stilene fra starten av animasjonen. Etter at animasjonen er ferdig, får elementet stilene fra slutten av animasjonen.

La oss se på følgende eksempel for å undersøke forskjellen mellom verdiene. Eksempelet viser at elementets tilstand aldri vil endre seg hvis vi har brukt riktig verdi for animation-fill-mode. Etter at koden er kjørt, vil elementenes slutt-tilstand være uforanderlig. Hvis vi ønsker å se animasjonen på nytt, må siden lastes inn på nytt.

index.html

index.html

index.css

index.css

copy

animation-play-state-egenskapen

Vi kan kontrollere animasjonens avspillingsstatus. Den kan være satt til pause eller kjøre.

animation-play-state: running | paused
  • running – Dette er standardverdien. Starter eller gjenopptar animasjonen;
  • paused – Stopper animasjonen i gjeldende tilstand.

Vi ser på følgende eksempel, hvor vi stopper den uendelige animasjonen når markøren holdes over elementet.

index.html

index.html

index.css

index.css

copy
question mark

Hva er formålet med egenskapen animation-fill-mode

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 4
some-alt