Egenskapen animation-iteration-count
Egenskapen animation-iteration-count
angir antall gjentakelser av animasjonen. Som standard
vil animasjonen gjentas kun 1 gang og
deretter returnere til utgangstilstanden.
Vår egenskap lar oss imidlertid angi
et bestemt antall gjentakelser eller til og med
angi uendelig repetisjon.
Syntaks
selector {
animation-iteration-count: heltall eller desimaltall | infinite;
}
Verdier
| Verdi | Beskrivelse |
|---|---|
| Tall |
Angitt antall gjentakelser, etter at disse er fullført vil animasjonen stoppe.
Posisjonen den vil innta, reguleres av
egenskapen animation-fill-mode.
Det er mulig å angi brøkverdier - i dette tilfellet vil animasjonen spilles av
bare delvis.
|
infinite |
Animasjonen vil gjentas uendelig. |
Standardverdi: 1.
Eksempel . Begrenset antall gjentakelser
I dette eksemplet vil animasjonen gjentas kun
3 ganger, og deretter returnere til utgangstilstanden:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 3;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Eksempel . Verdien infinite
Nå vil animasjonen gjentas uendelig:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Se også
-
egenskapen
animation-name,
som angir navnet på animasjonen -
egenskapen
animation-duration,
som angir varigheten av animasjonen -
egenskapen
animation-delay,
som angir forsinkelse før utførelse av animasjonen -
egenskapen
animation-timing-function,
som angir hastigheten for utførelse av animasjonen -
egenskapen
animation-direction,
som angir retningen på animasjonen -
egenskapen
animation-fill-mode,
som angir tilstanden til animasjonen -
egenskapen
animation-play-state,
som lar oss sette animasjonen på pause -
egenskapen
animation,
som er en forkortelse for animasjoner -
kommandoen
@keyframes,
som angir nøkkelrammene for animasjonen -
myke overganger
transition, som er en animasjon ved å peke på et element