Esempio
Fare qualcosa con un <div> elemento quando un'animazione CSS è iniziata:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari
and Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
//
Standard syntax
x.addEventListener("animationstart", myStartFunction); Prova tu stesso " Definizione e l'utilizzo
L'evento si verifica quando animationstart un'animazione CSS ha iniziato a giocare.
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 | |||||
|---|---|---|---|---|---|
| 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, utilizzare il prefisso webkitAnimationStart.
Sintassi
object.addEventListener("webkitAnimationStart", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationstart", myScript );
// Standard syntax
Nota: addEventListener() metodo non è supportato in Internet Explorer 8 e versioni precedenti.
Dettagli tecnici
| bolle: | sì |
|---|---|
| cancelable: | No |
| Tipo di evento: | AnimationEvent |
| DOM Versione: | Livello 3 Eventi |
Pagine correlate
Tutorial CSS: CSS3 animazioni
CSS Riferimento: CSS3 animation Property
HTML DOM di riferimento: Style animation Property
<Oggetto evento