The animationiteration
event is fired when an iteration of a CSS Animation ends, and another one begins. This event does not occur at the same time as the animationend
event, and therefore does not occur for animations with an animation-iteration-count
of one.
Bubbles | Yes |
---|---|
Cancelable | No |
Interface | AnimationEvent |
Event handler property | onanimationiteration |
Examples
This code uses animationiteration
to keep track of the number of iterations an animation has completed:
const animated = document.querySelector('.animated'); let iterationCount = 0; animated.addEventListener('animationiteration', () => { iterationCount++; console.log(`Animation iteration count: ${iterationCount}`); });
The same, but using the onanimationiteration
event handler property:
const animated = document.querySelector('.animated'); let iterationCount = 0; animated.onanimationiteration = () => { iterationCount++; console.log(`Animation iteration count: ${iterationCount}`); };
Live example
HTML
<div class="animation-example"> <div class="container"> <p class="animation">You chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">Activate animation</button> <div class="event-log"></div> </div>
CSS
.container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translateX(100%) scaleX(3); } to { transform: translateX(0) scaleX(1); } }
JS
const animation = document.querySelector('p.animation'); const animationEventLog = document.querySelector('.animation-example>.event-log'); const applyAnimation = document.querySelector('.animation-example>button.activate'); let iterationCount = 0; animation.addEventListener('animationstart', () => { animationEventLog.textContent = `${animationEventLog.textContent}'animation started' `; }); animation.addEventListener('animationiteration', () => { iterationCount++; animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `; }); animation.addEventListener('animationend', () => { animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`; animation.classList.remove('active'); applyAnimation.textContent = "Activate animation"; }); animation.addEventListener('animationcancel', () => { animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`; }); applyAnimation.addEventListener('click', () => { animation.classList.toggle('active'); animationEventLog.textContent = ''; iterationCount = 0; let active = animation.classList.contains('active'); if (active) { applyAnimation.textContent = "Cancel animation"; } else { applyAnimation.textContent = "Activate animation"; } });
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations | Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
animationiteration event | Chrome Full support 43 | Edge Full support 12 | Firefox Full support 51 | IE Full support 10 | Opera Full support 30 | Safari Full support 9 | WebView Android Full support 43 | Chrome Android Full support 43 | Firefox Android Full support 51 | Opera Android Full support 30 | Safari iOS Full support 9 | Samsung Internet Android Full support 4.0 |
Legend
- Full support
- Full support
See also
- CSS Animations
- Using CSS Animations
AnimationEvent
- Related events:
animationstart
,animationend
,animationcancel
- This event on
Document
targets:animationiteration
- This event on
Window
targets:animationiteration