Eigenschap animation-iteration-count

De eigenschap animation-iteration-count specificeert het aantal herhalingen van een animatie. Standaard wordt een animatie slechts 1 keer herhaald en keert dan terug naar de oorspronkelijke staat. Onze eigenschap maakt het echter mogelijk om een bepaald aantal herhalingen in te stellen of zelfs oneindige herhaling in te stellen.

Syntaxis

cssselector {
  animation-iteration-count: geheel of decimaal getal | infinite;
}

Waarden

Standaardwaarde: 1.

Voorbeeld . Eindig aantal herhalingen

In dit voorbeeld wordt de animatie slechts 3 keer herhaald, en keert dan terug naar de oorspronkelijke staat:

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

En nu wordt de animatie oneindig herhaald:

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;
}

Результат:

Zie ook