Hå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– Kombinererbackwardsogforwards. 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.css
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.css
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
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.04Hå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– Kombinererbackwardsogforwards. 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.css
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.css
Takk for tilbakemeldingene dine!
