Iterations
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
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.
Note: Element.animate()
, KeyframeEffectReadOnly.KeyframeEffectReadOnly()
, and KeyframeEffect.KeyframeEffect()
all accept an object of timing properties including iterations
. The value of iterations
corresponds directly to AnimationEffectTimingReadOnly.iterations
in timing
objects returned by AnimationEffectReadOnly
, KeyframeEffectReadOnly
, and KeyframeEffect
.
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
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'iterations' in that specification. |
Working Draft | Editor's draft. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes) | 48 (48) | No support | (Yes) | No support |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | No support | No support | No support |
See also
- Web Animations API
Element.animate()
,KeyframeEffectReadOnly.KeyframeEffectReadOnly()
, andKeyframeEffect.KeyframeEffect()
all accept an object of timing properties including this one.- The value of this property corresponds to the one in
AnimationEffectTimingReadOnly
(which is thetiming
object forAnimationEffectReadOnly
,KeyframeEffectReadOnly
, andKeyframeEffect
). - CSS's
animation-iteration-count
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/animationeffecttimingproperties/iterations