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: