The CSS animation-iteration-count property allows you to specify how many iterations - or cycles - the animation will play. In other words, it determines how many times it loops before stopping.
The animation-iteration-count property in CSS is used to specify the number of times the animation will be repeated. It can specify as infinite to repeat the animation indefinitely.
The animation-iteration-count property is used to specify the number of times that an animation cycle is played before the animation stops.
The initial value is ‘1’, meaning the animation will play from beginning to end once.
This property is often used in conjunction with an animation-direction value of alternate, which will cause the animation to play in reverse on alternate cycles. See the live demo section below for a live demo.
You can specify one iteration count or multiple comma-separated iteration counts. When you provide a list of comma-separated iteration counts, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-delay, animation-timing-function, and animation-name properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.
animation-iteration-count: number|infinite|initial|inherit;