animationiteration Event

Esempio

Fare qualcosa con un <div> elemento quando un'animazione CSS si ripete:

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

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);

// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);

Prova tu stesso "

Definizione e l'utilizzo

L'evento si verifica quando animationiteration un'animazione CSS si ripete.

Se il CSS animationiteration-count proprietà è impostata su "1" , il che significa che l'animazione viene riprodotto una sola volta, l'evento animationiteration non si verifica. L'animazione deve essere eseguito più di una volta per questo evento al fuoco.

Per ulteriori informazioni su CSS Animations, vedere il nostro tutorial su CSS3 animazioni .

Quando un'animazione CSS gioca, ci sono tre eventi che si possono verificare:

animationstart - si verifica quando l'animazione CSS è iniziata
animationiteration - si verifica quando l'animazione CSS si ripete
animationend - si verifica quando l'animazione CSS ha completato

Supporto browser

I numeri nella tabella indicano la prima versione del browser che supporta pienamente l'evento.

Numeri seguiti da "webkit" o "moz" specificano la prima versione che ha lavorato con un prefisso.

Evento
animationiteration	4.0 webkit	10.0	16,0 5.0 moz	4.0 webkit	15.0 webkit 12.1

Nota: per Chrome, Safari e Opera, utilizzare il prefisso webkitAnimationIteration.

Sintassi

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

Nota: addEventListener() metodo non è supportato in Internet Explorer 8 e versioni precedenti.