W3docs
en
Log in

CSS animation-iteration-count Property

The CSS animation-iteration-count specified the number of times animation should be played. See examples and practice yourself.

The CSS animation-iteration-count defines how many times the animation should be played. It accepts two types of values: a number or the infinite keyword. The default value is 1. Zero is a valid value (the animation will not play), but negative values are invalid. The infinite keyword specifies that the animation should repeat forever.

When multiple comma-separated values are specified, they are applied sequentially to the animations defined in animation-name. If there are fewer values than animations, the list is repeated. If there are more values than animations, the extra values are ignored.

The animation-iteration-count property is one of the CSS3 properties.

Initial Value1
Applies toAll elements, ::before and ::after pseudo-elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.animationIterationCount = "infinite";

Syntax

Syntax of CSS animation-iteration-count Property

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

Example of the animation-iteration-count property:

Example of CSS animation-iteration-count Property with number value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      div {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 30px 0;
        border-radius: 50%;
        animation-name: pulse;
      }
      .element-one {
        background-color: #1c87c9;
        animation-duration: 3s;
        animation-iteration-count: 3;
      }
      .element-two {
        margin: 0;
        background-color: #83bf42;
        animation-duration: 5s;
        animation-iteration-count: 2;
      }
      @keyframes pulse {
        0% {
          transform: translateX(0);
        }
        50% {
          transform: translateX(50%);
        }
        100% {
          transform: translateX(0);
        }
      }
    </style>
  </head>
  <body>
    <h2>The animation-iteration-count example</h2>
    <p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>
Try it Yourself »

Example of the animation-iteration-count property with the "infinite" value:

Example of CSS animation-iteration-count Property with infinite value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      div {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 30px 0;
        border-radius: 50%;
        animation-name: pulse;
      }
      .element-one {
        background-color: #1c87c9;
        animation-duration: 3s;
        animation-iteration-count: infinite;
      }
      .element-two {
        margin: 0;
        background-color: #83bf42;
        animation-duration: 5s;
        animation-iteration-count: 2;
      }
      @keyframes pulse {
        0% {
          transform: translateX(0);
        }
        50% {
          transform: translateX(50%);
        }
        100% {
          transform: translateX(0);
        }
      }
    </style>
  </head>
  <body>
    <h2>The animation-iteration-count example</h2>
    <p>The animation-iteration-count property sets the number of times an animation cycle should be played before stopping.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
numberDefines how many times the animation should be played. Default value is 1.Play it »
infiniteThe animation is played without stopping.Play it »
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

What does the CSS 'animation-iteration-count' property specify?