# animation-iteration-count property

The `animation-iteration-count` property specifies a number of times an animation should repeat. By default, the animation will only repeat `1` time and then return to its original state. Our property, however, allows you to specify a specific number of repetitions or even set it to repeat infinitely.

## Syntax

`selector { animation-iteration-count: integer or fractional number | infinite; }`

## Values

Value | Description
--- | ---
Number | The specified number of repetitions after which an animation will stop. The position it will occupy is controlled by the `animation-fill-mode` property. You can set fractional values ​​- in this case, the animation will only play partially.
`infinite` | The animation will repeat infinitely.

Default value: `1`.

## Example . Finite number of repetitions

In this example, the animation will only repeat `3` times and then return to its original state:

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

:

## Example . The infinite value

And now the animation will repeat infinitely:

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

:

## See also

- the `animation-name` property
  that specifies an animation name
- the `animation-duration` property
  that sets an animation duration
- the `animation-delay` property
  that sets a delay before an animation
- the `animation-timing-function` property
  that sets an animation speed
- the `animation-direction` property
  that sets an animation direction
- the `animation-fill-mode` property
  that sets the animation mode
- the `animation-play-state` property
  that allows you to pause an animation
- the `animation` property
  that is a shorthand for animation
- the `@keyframes` at-rule
  that set keyframes for an animation
- a smooth `transition`, representing an animation when hovering over an element

← →
↑
en ru