Kontroll av Animasjonsiterasjon og Retning
animation-iteration-count-egenskapen
Antall ganger en animasjon skal spilles av kan kontrolleres. animation-iteration-count angir hvor mange ganger animasjonen skal gjentas.
animation-iteration-count: number_without_units
Det er også mulig å angi nøkkelordet infinite som verdi. Da vil animasjonen fortsette uendelig.
Se følgende eksempel for å se hvordan antall animasjoner kan påvirkes:
index.html
index.css
animation-direction-egenskapen
animation-direction styrer retningen på animasjonen. Den bestemmer om en animasjon skal spilles forover, bakover, eller veksle mellom forover og bakover.
animation-direction: normal | reverse | alternate | alternate-reverse
normal– standardverdi. Animasjonen spilles forover fra begynnelse til slutt;reverse– Animasjonen spilles bakover fra slutt til begynnelse;alternate– Animasjonen spilles forover og deretter bakover, veksler mellom de to retningene;alternate-reverse– Animasjonen spilles bakover og deretter forover, veksler mellom de to retningene.
La oss se hvilken effekt vi kan oppnå i følgende eksempel. Vi har et bilde der standardoppførselen er å bevege seg gjentatte ganger fra venstre til høyre. Vi kan imidlertid endre denne oppførselen. Vi skal teste alle de fire verdiene for animation-direction-egenskapen.
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 show me an example of how to use animation-iteration-count and animation-direction together?
What does the animation look like with each animation-direction value?
Can you explain the difference between alternate and alternate-reverse with a visual example?
Awesome!
Completion rate improved to 2.04Kontroll av Animasjonsiterasjon og Retning
Sveip for å vise menyen
animation-iteration-count-egenskapen
Antall ganger en animasjon skal spilles av kan kontrolleres. animation-iteration-count angir hvor mange ganger animasjonen skal gjentas.
animation-iteration-count: number_without_units
Det er også mulig å angi nøkkelordet infinite som verdi. Da vil animasjonen fortsette uendelig.
Se følgende eksempel for å se hvordan antall animasjoner kan påvirkes:
index.html
index.css
animation-direction-egenskapen
animation-direction styrer retningen på animasjonen. Den bestemmer om en animasjon skal spilles forover, bakover, eller veksle mellom forover og bakover.
animation-direction: normal | reverse | alternate | alternate-reverse
normal– standardverdi. Animasjonen spilles forover fra begynnelse til slutt;reverse– Animasjonen spilles bakover fra slutt til begynnelse;alternate– Animasjonen spilles forover og deretter bakover, veksler mellom de to retningene;alternate-reverse– Animasjonen spilles bakover og deretter forover, veksler mellom de to retningene.
La oss se hvilken effekt vi kan oppnå i følgende eksempel. Vi har et bilde der standardoppførselen er å bevege seg gjentatte ganger fra venstre til høyre. Vi kan imidlertid endre denne oppførselen. Vi skal teste alle de fire verdiene for animation-direction-egenskapen.
index.html
index.css
Takk for tilbakemeldingene dine!
