Événement animationend

Événements DOM AnimationEvent

Définition et utilisation

L'événement animationend se produit lorsque l'animation CSS est terminée.

Pour en savoir plus sur les animations CSS, apprenez notre Tutoriel d'animation CSS3.

Trois événements peuvent se produire lorsque l'animation CSS est jouée :

Exemple

Lorsque l'animation CSS est terminée, faites quelque chose pour l'élément <div> :

var x = document.getElementById("myDIV");
// Code pour Chrome, Safari et Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Syntaxe standard
x.addEventListener("animationend", myEndFunction);

Essayez-le vous-même

Syntaxe

object.addEventListener("webkitAnimationEnd", myScript);  // Code pour Chrome, Safari et Opera
object.addEventListener("animationend", myScript);        // Syntaxe standard

Remarque :Internet Explorer 8 et versions antérieures ne prennent pas en charge Méthode addEventListener().

Détails techniques

Bubbling : Pris en charge
Annulable : Non pris en charge
Type d'événement : AnimationEvent
Version DOM : Événements de niveau 3

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge complètement cet événement.

Le "webkit" ou "moz" après le nombre indique la première version du préfixe utilisé.

Événement Chrome IE Firefox Safari Opera
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 webkitAnimationEnd.

Pages associées

Tutoriel CSS :Animation CSS3

Manuel de référence CSS :Attribut animation CSS3

Manuel de référence HTML DOM :Attribut animation Style

Événements DOM AnimationEvent