CSS animation-iteration-count Property

The animation-iteration-count property in CSS specifies the number of times an animation should be repeated. It can also be set to infinite to repeat the animation indefinitely.

Syntax

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

Property Value

• number: Specifies the number of times the animation should be played. The default is 1.
• infinite: The animation will repeat indefinitely.
• initial: Sets the property to its default value.
• inherit: Inherits the property from its parent element.

Example: HTML program to illustrate animation-iteration-count 

Output:

Best Practices for Using Animation-Iteration-Count:

• Avoid Overuse: Excessive repetition can be distracting.
• Performance Considerations: Test animations on various devices to ensure smooth performance.
• Enhance User Experience: Use animations to make your interface more engaging without overwhelming users.

Supported Browser: The browser supported by animation-iteration-count property are listed below:

• Google Chrome 43.0 and above
• Edge 12.0 and above
• Firefox 16.0 and above
• Opera 30.0 and above
• Safari 9.0 and above