Web/API/GlobalEventHandlers/onanimationiteration

From Get docs

Draft This page is not complete.


The onanimationiteration property of the GlobalEventHandlers mixin is the EventHandler for processing animationiteration events.

The animationiteration event is sent when a CSS animation reaches the end of an iteration. An iteration ends when a single pass through the sequence of animation instructions is completed by executing the last animation step.

Syntax

var animIterationHandler = target.onanimationiteration;

target.onanimationiteration = Function

Value

A Function to be called when an animationiteration event occurs indicating that a CSS animation has reached the end of an iteration while running on the target, where the target object is an HTML element (HTMLElement), document (Document), or window (Window). The function receives as input a single parameter: an AnimationEvent object describing the event which occurred.

Example

Let's create an animation which automatically pauses at the end of each iteration, allowing the user to choose whether or not to start the next iteration. Much of this code is the same as in other examples of animation events, so it may look familiar.

CSS

Leaving out some bits of the CSS that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. First is the box itself. We set its size, position, color, and layout. Note that there's nothing there about animation. That's because we don't want the box to start animating right away. We'll add the animation style later to start animating the box.

#box {
  width: var(--boxwidth);
  height: var(--boxwidth);
  left: 0;
  top: 0;
  border: 1px solid #7788FF;
  margin: 0;
  position: relative;
  background-color: #2233FF;
  display: flex;
  justify-content: center;
  animation: 2s ease-in-out 0s infinite alternate both paused slideBox;
}

The animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner.

@keyframes slideBox {
  from {
    left:0;
    top:0;
  }
  to {
    left:calc(100% - var(--boxwidth));
    top:calc(100% - var(--boxwidth))
  }
}

JavaScript

Some JavaScript code will need to be written to handle the click on the button to start the next iteration. Let's have a look.

var box = document.getElementById("box");
var iterationCounter = 0;

box.onanimationiteration = function(event) {
  box.style.animationPlayState = "paused";
  document.getElementById("play").innerHTML = "Start Iteration #" + (iterationCounter+1);
};

This sets up two global variables: box, which references the "box" element that we're animating, and iterationCounter, which is initially zero, which indicates how many iterations of the animation have occurred.

The onanimationiteration event handler is then set up. It simply sets the box's animation-play-state to "paused", then updates the text displayed in the button to indicate that clicking the button will start playing the next iteration of theanimation.

Finally, we set up a handler for a click on the button that runs the animation:

document.getElementById("play").addEventListener("click", function(event) {
  box.style.animationPlayState = "running";
  iterationCounter++;
}, false);

This sets the box element's animation-play-state to "running" and increments the iteration counter. That's all there is to it!

Result

Assembled together, you get this:

Each time the box reaches the opposing corner, it stops, with the button reflecting which iteration number is up next, until you click the button to run the next iteration.

Specification

Specification Status Comment
CSS AnimationsThe definition of 'onanimationiteration' in that specification. Working Draft  

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
onanimationiteration

Chrome Full support Yes


Full support Yes


Full support Yes

Alternate Name'

Alternate Name' Uses the non-standard name: onwebkitanimationiteration

Edge Full support ≤79


Full support ≤79


Full support ≤79

Alternate Name'

Alternate Name' Uses the non-standard name: onwebkitanimationiteration

Firefox

Full support 51

IE

?

Opera

?

Safari

Full support 9

WebView Android Full support Yes


Full support Yes


Full support Yes

Alternate Name'

Alternate Name' Uses the non-standard name: onwebkitanimationiteration

Chrome Android Full support Yes


Full support Yes


Full support Yes

Alternate Name'

Alternate Name' Uses the non-standard name: onwebkitanimationiteration

Firefox Android

Full support 51

Opera Android

?

Safari iOS

Full support 9

Samsung Internet Android Full support Yes


Full support Yes


Full support Yes

Alternate Name'

Alternate Name' Uses the non-standard name: onwebkitanimationiteration

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Uses a non-standard name.'
Uses a non-standard name.


See also

  • The animationiteration event, which triggers this event handler
  • AnimationEvent