Événement animationiteration

Événement DOM AnimationEvent

Définition et utilisation

L'événement animationiteration se produit lors de la répétition de l'animation CSS.

Si Attribut animation-iteration-count de CSSDéfini sur "1", cela signifie que l'animation ne sera jouée qu'une seule fois et que l'événement animationiteration ne se produira pas. L'animation doit être exécutée plusieurs fois pour déclencher cet événement.

Pour plus de connaissances sur les animations CSS, veuillez suivre notre Tutoriel d'animation CSS3.

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

Exemple

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

var x = document.getElementById("myDIV");
// Code pour Chrome, Safari et Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Syntaxe standard
x.addEventListener("animationiteration", myRepeatFunction);

Essayez-le vous-même

Syntaxe

object.addEventListener("webkitAnimationIteration", myScript);  // Code pour Chrome, Safari et Opera
object.addEventListener("animationiteration", 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 prenant en charge l'événement.

Les chiffres après "webkit" ou "moz" indiquent la première version utilisant le préfixe.

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

Guide CSS :Attribut CSS3 animation

Guide CSS :Attribut CSS3 animation-iteration-count

Guide HTML DOM :Attribut animation du style

Événement DOM AnimationEvent