animationend événement

Exemple

Faire quelque chose avec un <div> élément lors d' une animation CSS a pris fin:

var x = document.getElementById("myDIV");

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);

// Standard syntax
x.addEventListener("animationend", myEndFunction);

Essayez vous - même »

Définition et utilisation

L'événement animationend se produit lorsqu'une animation CSS est terminée.

Pour plus d' informations sur CSS Animations, consultez notre tutoriel sur animations CSS3 .

Quand une animation CSS joue, il y a trois événements qui peuvent se produire:

animationstart - se produit lorsque l'animation CSS a commencé
animationiteration - se produit lorsque l'animation CSS est répété
animationend - se produit lorsque l'animation CSS a terminé

Support du navigateur

Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement l'événement.

Les chiffres suivis par "webkit" ou "moz" précisent la première version qui a travaillé avec un préfixe.

un événement
animationend	4.0 webkit	10.0	16,0 5.0 moz	4.0 webkit	15,0 webkit 12.1

Remarque: Pour Chrome, Safari et Opera, utilisez le préfixe webkitAnimationEnd.

Syntaxe

object.addEventListener("webkitAnimationEnd", myScript ); // Code for Chrome, Safari and Opera
object .addEventListener("animationend", myScript ); // Standard syntax

Note: Le addEventListener() méthode est pas prise en charge dans Internet Explorer 8 et les versions antérieures.