Animationstart Evento
Esempio
Fai qualcosa con un elemento <div> quando è iniziata un'animazione CSS:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// Standard syntax
x.addEventListener("animationstart", myStartFunction);
Definizione e utilizzo
L'evento animationstart si verifica quando viene avviata la riproduzione di un'animazione CSS.
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 | |||||
---|---|---|---|---|---|
animationstart | 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 webkitAnimationStart.
Sintassi
object.addEventListener("webkitAnimationStart", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationstart", 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