Eienskap animation-iteration-count
Die eienskap animation-iteration-count
spesifiseer die aantal kere wat 'n animasie herhaal moet word. Standaard
sal 'n animasie slegs 1 keer herhaal en
dan terugkeer na sy oorspronklike toestand.
Ons eienskap laat eger toe om 'n
spesifieke aantal herhalings te stel, of selfs
oneindige herhaling te spesifiseer.
Sintaksis
selekteerder {
animation-iteration-count: heelgetal of desimale getal | infinite;
}
Waardes
| Waarde | Beskrywing |
|---|---|
| Getal |
Die gespesifiseerde aantal herhalings, waarna die animasie sal stop.
Die posisie wat dit dan inneem, word gereguleer deur die
eienskap animation-fill-mode.
Desimale waardes kan gebruik word - in hierdie geval sal die animasie slegs
gedeeltelik speel.
|
infinite |
Die animasie sal eindeloos herhaal. |
Standaardwaarde: 1.
Voorbeeld . Eindige aantal herhalings
In hierdie voorbeeld sal die animasie slegs
3 keer herhaal, en dan terugkeer na die oorspronklike
toestand:
<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;
}
:
Voorbeeld . Waarde infinite
Nou sal die animasie eindeloos herhaal:
<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;
}
:
Sien ook
-
die eienskap
animation-name,
wat die naam van die animasie spesifiseer -
die eienskap
animation-duration,
wat die duur van die animasie spesifiseer -
die eienskap
animation-delay,
wat die vertraging voor die animasie spesifiseer -
die eienskap
animation-timing-function,
wat die spoed van die animasie spesifiseer -
die eienskap
animation-direction,
wat die rigting van die animasie spesifiseer -
die eienskap
animation-fill-mode,
wat die toestand van die animasie spesifiseer -
die eienskap
animation-play-state,
wat toelaat om die animasie te pauzeer -
die eienskap
animation,
wat 'n kortvorm vir animasies is -
die opdrag
@keyframes,
wat die sleutelframes van die animasie spesifiseer -
gladde oorgange
transition, wat animasies is wat by element-oorbeweging aktiveer