Iterations

The iterations property of the Web Animations API the number of times the animation should repeat. It defaults to 1, and can also take a value of Infinity to make it loop infinitely. 

Syntax

// Set the animation to run twice
var timingProperties = {
  iterations: 2
}

Value

A whole number or decimal greater than or equal to 0, or Infinity. Defaults to 0.

Examples

In the Forgotten Key example, Alice waves her arm up and down infinitely by passing Infinity as the value for her iterations property:

// Get Alice's arm, and wave it up and down
document.getElementById("alice_arm").animate([ 
  { transform: 'rotate(10deg)' }, 
  { transform: 'rotate(-40deg)' }
], {
  easing: 'steps(2, end)',
  iterations: Infinity,
  direction: 'alternate',
  duration: 600
});

Specifications

Browser compatibility

See also

• Web Animations API
• Element.animate(), KeyframeEffectReadOnly.KeyframeEffectReadOnly(), and KeyframeEffect.KeyframeEffect() all accept an object of timing properties including this one.
• The value of this property corresponds to the one in AnimationEffectTimingReadOnly (which is the timing object for AnimationEffectReadOnly, KeyframeEffectReadOnly, and KeyframeEffect).
• CSS's animation-iteration-count