animazioneend Evento
Esempio
Fai qualcosa con un elemento <div> quando un'animazione CSS è terminata:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
Definizione e utilizzo
L'evento animationend si verifica quando un'animazione CSS è stata completata.
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 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 | |||||
---|---|---|---|---|---|
animationend | 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 webkitAnimationEnd.
Sintassi
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", 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 HTML DOM: Proprietà di animazione dello stile