AnimationEffectTimingReadOnly.iterations

The iterations property of AnimationEffectTimingReadOnly represents 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

// Getting the number of iterations
var animationLoops = animation.effect.timing.iterations;

// Setting the number of iterations 
animation.effect.timing.iterations = 2.3;

Value

A floating-point value specifying the number of times the animation sequence will play through. Any value from 0 (don't play the animation at all) to positive Infinity (run the animation indefinitely) is supported. Defaults to 1, meaning the animation sequence plays through once then stops automatically.

Examples

In the Red Queen's Race example, we can inspect the timing property on the redQueen_alice animation to discover how many loops Alice and the Red Queen's animation has:

// Infinity
return redQueen_alice.effect.timing.iterations;

Specifications

Browser compatibility

[1] The Web Animations API is only enabled by default in Firefox Developer Edition and Nightly builds. You can enable it in beta and release builds by setting the preference dom.animations-api.core.enabled to true, and can disable it in any Firefox version by setting this preference to false.

See also

• Web Animations API
• AnimationEffectReadOnly.timing returns a AnimationEffectTimingReadOnly object...
• ...while AnimationEffect.timing returns a mutable AnimationEffectTiming object.
• CSS's animation-iteration-count