animationiteration

16 March, 2023

Contributors

Milsaware

@milsaware

About

The animationiteration event is triggered when a CSS animation completes one iteration or cycle. This event allows developers to perform actions in response to the completion of a single iteration of an animation, which can be useful for creating complex animations that require more precise control.

When a CSS animation is set to repeat using the animation-iteration-count property in CSS, the animationiteration event is triggered at the end of each iteration of the animation. This event can be captured using JavaScript to perform additional actions in response to the completion of each iteration. For example, you could use the animationiteration event to change the direction or speed of an animation, or to update some other aspect of the UI based on the current iteration of the animation.

Event listener

Here is an example of how to use the animationiteration event with HTML, CSS, and JavaScript:

CSS

.box {
    width: 50px;
    height: 50px;
    background-color: red;
    animation: move 2s linear infinite;
}

@keyframes move {
    from { transform: translateX(0); }
    to { transform: translateX(200px); }
}

HTML

<div id="myElement" class="box"></div>

JavaScript

const element = document.querySelector('#myElement');

element.addEventListener('animationiteration', () => {
    console.log('Animation iteration has completed!');
    element.style.backgroundColor = 'green';
});

Here, we have a div element with an id of "myElement" that has a class of "box". The box class sets the width, height, background-color, and animation properties of the div element. The animation is set to move the div element 200 pixels to the right, and it will loop infinitely.

We have also added an event listener for the animationiteration event on the div element. When an iteration of the animation loop is completed, the event listener logs a message to the console and changes the background colour of the div element to green.

Property

You can also use the onanimationiteration property to attach an event listener to the animationiteration event directly on an element:

const animatedElement = document.getElementById('myElement');

animatedElement.onanimationiteration = () => {
    console.log('One iteration of the animation has completed.');
};

Here, the onanimationiteration property is set to a function that logs a message to the console when the animationiteration event is triggered on the animatedElement.

Inline

The animationiteration event can also be used in inline HTML using the onanimationiteration attribute. For example:

<div id="myElement" class="box" onanimationiteration="changeColour()"></div>

function changeColour() {
    console.log('Animation iteration has completed!');
    document.getElementById('myElement').style.backgroundColor = 'green';
}

Here, we have added an onanimationiteration attribute to the div element with an id of "myElement". The attribute calls the changeColour() function each time an iteration of the animation loop is completed.

The changeColour() function logs a message to the console and changes the background colour of the div element to green.

Note that using inline event handlers can make your code harder to read and maintain, especially if you have a lot of them. It's generally considered better practice to separate your JavaScript code from your HTML code by using event listeners.

Programmatic trigger

You can also trigger the animationiteration event programmatically by using the dispatchEvent() method. Here's an example:

const element = document.querySelector('#myElement');

element.addEventListener('animationiteration', () => {
    console.log('Animation iteration has completed!');
    element.style.backgroundColor = 'green';
});

function triggerAnimationIteration() {
    const animationIterationEvent = new Event('animationiteration');
    element.dispatchEvent(animationIterationEvent);
}

Here, we've added an event listener for the animationiteration event on the div element, just like in the previous example. We've also added a function called triggerAnimationIteration() that creates a new animationiteration event using the Event() constructor and dispatches it on the div element using the dispatchEvent() method.

You can call the triggerAnimationIteration() function at any time to programmatically trigger the animationiteration event on the div element. When the event is triggered, the event listener will log a message to the console and change the background colour of the div element to green, just like in the previous example.

javascript

animation