This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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. 

Note: In AnimationEffectTiming, a mutable subclass of AnimationEffectTimingReadOnly used withKeyframeEffects, the property acts as both a getter and a setter.


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

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


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.


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;


Specification Status Comment
Web Animations
The definition of 'AnimationEffectTimingReadOnly.iterations' in that specification.
Working Draft Editor's draft.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes ?481 2 No Yes No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ?481 2 No No ?

1. The preference is set to true by default on Firefox Nightly and on Firefox Developer Edition, but not on the official release.

2. From version 48: this feature is behind the dom.animations-api.core-enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

Document Tags and Contributors

Contributors to this page: fscholz, rachelnabors, chrisdavidmills
Last updated by: fscholz,