Својство animation-iteration-count

Својство animation-iteration-count поставља број понављања анимације. Подразумевано се анимација понови само 1 пут и затим се враћа у почетно стање. Наше својство, међутим, омогућава да се постави одређени број понављања или уопште постави бесконачно понављање.

Синтакса

cssселектор {
  animation-iteration-count: цео или разломљени број | infinite;
}

Вредности

Подразумевана вредност: 1.

Пример . Крајњи број понављања

У овом примеру ће се анимација поновити само 3 пута, а затим ће се вратити у почетно стање:

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

Результат:

Пример . Вредност infinite

А сада ће се анимација понављати бесконачно:

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

Результат:

Погледајте такође