CSS animation-iteration-count

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.

For example, an animation-iteration-count of 5 will result in the animation repeating for 5 cycles/loops.

Specifying an animation-iteration-count of infinite results in the animation repeating forever.


Possible Values

This keyword specifies that the animation should play forever — it should never stop. This keyword is used as follows: animation-iteration-count: infinite
Defines the number of iterations (or loops) that the animation will play before stopping. For example, animation-iteration-count: 8 will result in the animation looping 8 times before stopping.


Represents the value specified as the property's initial value.
Represents the computed value of the property on the element's parent.

Basic Property Information

Initial Value
Applies To
All elements, and the :before and :after pseudo elements

Example Code

Basic CSS

Working Example within an HTML Document

Try it

CSS Specifications

Browser Support


Vendor Prefixes




