Événement d'itération d'animation
Exemple
Faites quelque chose avec un élément <div> lorsqu'une animation CSS est répétée :
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
Définition et utilisation
L'événement animationiteration se produit lorsqu'une animation CSS est répétée.
Si la propriété CSS animation-iteration-count est définie sur "1", ce qui signifie que l'animation ne sera lue qu'une seule fois, l'événement animationiteration ne se produit pas. L'animation doit être exécutée plusieurs fois pour que cet événement se déclenche.
Pour plus d'informations sur les animations CSS, consultez notre tutoriel sur les animations CSS3 .
Lors de la lecture d'une animation CSS, trois événements peuvent se produire :
- animationstart - se produit lorsque l'animation CSS a démarré
- animationiteration - se produit lorsque l'animation CSS est répétée
- animationend - se produit lorsque l'animation CSS est terminée
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'événement.
Les nombres suivis de "webkit" ou "moz" spécifient la première version qui a fonctionné avec un préfixe.
Event | |||||
---|---|---|---|---|---|
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 le préfixe webkitAnimationIteration.
Syntaxe
object.addEventListener("webkitAnimationIteration", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationiteration", myScript); // Standard syntax
Remarque : La méthode addEventListener() n'est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
Bulles: | Oui |
---|---|
Annulable : | Non |
Type d'événement: | AnimationÉvénement |
Version DOM : | Événements de niveau 3 |
Pages connexes
Tutoriel CSS : Animations CSS3
Référence CSS : Propriété d'animation CSS3
Référence CSS : Propriété CSS3 animation-iteration-count
Référence HTML DOM : Propriété d'animation de style