An animation cycle runs only once by default, however with the animation-iteration-count property we can change this behavior. 


selector { 

    animation-iteration-count: number | infinite | initial | inherit;



The following values are permitted for the animation-iteration-count property:

  • number;  Defines how many times an animation should be played. Default value is 1.
  • infinite; Selects and infinite loop of the animation play (endless repeating).
  • initialinherit

This animation-iteration-count property accepts a number or the keyword infinite as its value. As you would expect, setting the value to infinite repeats the animation endlessly. Note that negative values are invalid.


The example with the automation-iteration-count property:


›› go to examples ››