animation-iteration-count

Бесконечная анимация? Легко! Для этого есть отдельное свойство.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

При помощи свойства animation-iteration-count можно указать, сколько раз будет проигрываться CSS-анимация.

Пример

Секция статьи "Пример"
        
          
          .element {  animation-name: circle-to-square;  animation-duration: 2s;  animation-iteration-count: infinite;}
          .element {
  animation-name: circle-to-square;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

        
        
          
        
      

Как понять

Секция статьи "Как понять"

По значению этого свойства браузер понимает, сколько раз нужно проиграть анимацию, сколько циклов должно быть.

Как пишется

Секция статьи "Как пишется"

В качестве значения указывается число, означающее количество повторений, или ключевое слово infinite. Если указано infinite, то анимация будет повторяться бесконечно. Это значение встречается чаще всего!

Подсказки

Секция статьи "Подсказки"