# Свойство animation-iteration-count

Свойство `animation-iteration-count` задает количество повторов анимации. По умолчанию анимации повторится только `1` раз и затем вернется в исходное состояние. Наше свойство, однако, позволяет задать определенное число повторений или вообще задать бесконечное повторение.

## Синтаксис

`селектор { animation-iteration-count: целое или дробное число | infinite; }`

## Значения

Значение | Описание
--- | ---
Число | Заданное количество повторений, после совершения которых анимация остановится. Положение, которое она займет, регулируется свойством `animation-fill-mode`. Можно задавать дробные значения - в этом случае анимация проиграется лишь частично.
`infinite` | Анимация будет повторятся бесконечно.

Значение по умолчанию: `1`.

## Пример . Конечное число повторений

В данном примере анимация повторится только `3` раза, а затем вернется в исходное состояние:

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

А сейчас анимация будет повторятся бесконечно:

`<div id="elem"></div>` `@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; }`

:

## Смотрите также

- свойство `animation-name`,
  которое задает имя анимации
- свойство `animation-duration`,
  которое задает продолжительность анимации
- свойство `animation-delay`,
  которое задает задержку перед выполнением анимации
- свойство `animation-timing-function`,
  которое задает скорость выполнения анимации
- свойство `animation-direction`,
  которое задает направление анимации
- свойство `animation-fill-mode`,
  которое задает состояние анимации
- свойство `animation-play-state`,
  которое позволяет поставить анимацию на паузу
- свойство `animation`,
  представляющее собой сокращение для анимаций
- команду `@keyframes`,
  задающую ключевые кадры анимации
- плавные переходы `transition`, представляющие собой анимацию по наведению на элемент

← →
↑
en ru