animation-iteration-count

{{CSSRef}}

The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.

{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}

It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.

Syntax

/* Keyword value */
animation-iteration-count: infinite;

/* <number> values */
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/* Multiple values */
animation-iteration-count: 2, 0, infinite;

/* Global values */
animation-iteration-count: inherit;
animation-iteration-count: initial;
animation-iteration-count: revert;
animation-iteration-count: revert-layer;
animation-iteration-count: unset;

The animation-iteration-count property is specified as one or more comma-separated values.

Values

infinite
- : The animation will repeat forever.
{{cssxref("<number>")}}
- : The number of times the animation will repeat; this is 1 by default. You may specify non-integer values to play part of an animation cycle: for example, 0.5 will play half of the animation cycle. Negative values are invalid.

[!NOTE] When you specify multiple comma-separated values on an animation-* property, they are applied to the animations in the order in which the {{cssxref("animation-name")}} s appear. For situations where the number of animations and animation-* property values do not match, see Setting multiple animation property values.

[!NOTE] When creating CSS scroll-driven animations, specifying an animation-iteration-count causes the animation to repeat that number of times over the course of the timeline’s progression. If an animation-iteration-count is not provided, the animation will only occur once. infinite is a valid value for scroll-driven animations, but it results in an animation that doesn’t work.

Formal definition

{{cssinfo}}

Formal syntax

{{csssyntax}}

Examples

Setting iteration count

This animation will run 10 times.

HTML

<div class="box"></div>

CSS

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: 10;
}

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

Result

Hover over the rectangle to start the animation.

{{EmbedLiveSample("Setting iteration count","100%","250")}}

See CSS animations for examples.

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

docs.rodeo

MDN Web Docs mirror