Animații CSS. Setarea rulării unei animații. Proprietatea animation-iteration-count.

Setați de câte ori ar trebui să ruleze o animație

Proprietatea animation-iteration-count specifică numărul pe care trebuie să-l ruleze o animație.

Următorul exemplu va rula animația de 3 ori înainte de a se opri:

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Următorul exemplu utilizează valoarea „infinite” pentru a face animația să continue pentru totdeauna:

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}