⌘K

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

cssselekteerder {
  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: 

html<div id="elem"></div>
css@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: 

html<div id="elem"></div>
css@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

BackDie animation-timing-function EienskapNextEienskap animation-direction