Contact Us | +1 888 239-0733 (Toll free US/CA) Mon-Fri: 7:30am to 4:30pm (PST)
The CSS 'animation-iteration-count' property specifies the number of times an animation cycle should be played before stopping. Essentially, it controls how many times an animation repeats itself. This property is crucial for creating animations that need to loop a specific number of times or indefinitely.
See the Pen
CSS 'animation-iteration-count' Property by Webzstore (@webzstore)
on CodePen. The 'animation-iteration-count' property offers a straightforward way to control the repetition of CSS animations, from simple, single-play animations to complex, infinitely looping effects. This flexibility is key to designing dynamic, interactive web experiences that engage and retain user attention. Use 'animation-iteration-count' when you want to repeat an animation. This can be particularly useful for creating attention-grabbing effects, such as blinking text, spinning icons, or a slide show that cycles through images. It's also handy for animations that should only play a fixed number of times before coming to a stop.CSS 'animation-iteration-count' Property Example
Browser Support For 'animation-iteration-count' Property
16.0
5.0 -moz-9.0
4.0 -webkit-43.0
4.0 -webkit-10.0 30.0
15.0 -webkit-
12.0 -o-CSS Syntax of the 'animation-iteration-count' Property
animation-iteration-count: number | infinite;
Usage of the 'animation-iteration-count' Property
Property Values of the 'animation-iteration-count' Property
"*" indicates required fields