CSS animation-iteration-count

The animation-iteration-count property specifies the number of times an animation should run. It can take several values, such as infinite to make the animation run infinitely or a specific number to define the exact number of iterations.

Let's dive into some examples to understand how animation-iteration-count works with CSS animations.

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: example;
      animation-duration: 2s;
      animation-iteration-count: 3;
    }

    @keyframes example {
      0% { background-color: red; }
      50% { background-color: blue; }
      100% { background-color: green; }
    }
  Copy

In this example, the CSS class .box defines a square div element with a red background color. The animation named example changes the background color of the box from red to blue to green. The animation runs for 2 seconds and repeats 3 times due to the value of animation-iteration-count being set to 3.

Now, let's take a look at another example where the animation runs infinitely:

    .square {
      width: 100px;
      height: 100px;      
      background-color: orange;
      animation-name: spin;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  Copy

In this example, the CSS class .circle creates a circular div element with an orange background color. The animation named spin rotates the circle 360 degrees clockwise. The animation duration is set to 5 second, and the animation-iteration-count property is set to infinite, making the animation run continuously.

By understanding how to use the animation-iteration-count property, you can control the number of times an animation should repeat, or make it run infinitely to create visually engaging effects on your web projects.