Evento di animazione
Esempio
Fai qualcosa con un elemento <div> quando viene ripetuta un'animazione CSS:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
Definizione e utilizzo
L'evento animationiteration si verifica quando viene ripetuta un'animazione CSS.
Se la proprietà CSS animation-iteration-count è impostata su "1", il che significa che l'animazione verrà riprodotta solo una volta, l'evento animationiteration non si verifica. L'animazione deve essere eseguita più di una volta affinché questo evento si attivi.
Per ulteriori informazioni sulle animazioni CSS, consulta il nostro tutorial sulle animazioni CSS3 .
Quando viene riprodotta un'animazione CSS, possono verificarsi tre eventi:
- animationstart - si verifica quando l'animazione CSS è iniziata
- animationiteration - si verifica quando l'animazione CSS viene ripetuta
- animationend - si verifica quando l'animazione CSS è stata completata
Supporto del browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente l'evento.
I numeri seguiti da "webkit" o "moz" specificano la prima versione che ha funzionato con un prefisso.
Event | |||||
---|---|---|---|---|---|
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, utilizza il prefisso webkitAnimationIteration.
Sintassi
object.addEventListener("webkitAnimationIteration", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationiteration", myScript); // Standard syntax
Nota: il metodo addEventListener() non è supportato in Internet Explorer 8 e versioni precedenti.
Dettagli tecnici
Bolle: | sì |
---|---|
Annullabile: | No |
Tipo di evento: | Animazione Evento |
Versione DOM: | Eventi di livello 3 |
Pagine correlate
Esercitazione CSS: Animazioni CSS3
Riferimento CSS: Proprietà di animazione CSS3
Riferimento CSS: proprietà CSS3 animation-iteration-count
Riferimento HTML DOM: Proprietà di animazione dello stile