The 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

cssselector {
  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:

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

Результат:

Example . The infinite value

And now the animation will repeat infinitely:

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