CSS animation-iteration-count Property Tutorial

In this section, we will learn what the animation-iteration-count property is and how to use it in CSS.

Click here to run the example of animation-iteration-count property.

CSS animation-iteration-count Property Definition and Usage

Who said that an animation can only occur once?! In fact, we can iterate an animation as much as we want using CSS `animation-iteration-count`.

Note: this property is used for those animations that are created by @keyframes rule.

CSS animation-iteration-count Property Syntax

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

CSS animation-iteration-count Property Value

The value we set for `animation-iteration-count` is any positive number. This number declares the iteration count.

Also, the default value for this property is 1 which means the animation should occur only one time and then stop.

Notes:

  • The value 0 means no animation at all.
  • We can set the value “infinite” for this property as well. Using this property means the animation should iterate infinitely.
  • The two global values, “initial” and “inherit” could also be used for this property.

Example: animation-iteration-count property in CSS

See the Pen animation-iteration-count property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS animation-iteration-count Property Work?

In this example, we’ve set the value of the animation-iteration-count to 3. This means the animation on the target element will iterate for 3 times in a row and then it’ll stop.

Leave a Reply