Ejemplo
Hacer algo con un <div> elemento cuando una animación CSS ha comenzado:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari
and Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
//
Standard syntax
x.addEventListener("animationstart", myStartFunction);
Inténtalo tú mismo " Definición y Uso
El evento animationstart se produce cuando una animación CSS ha comenzado a jugar.
Para obtener más información acerca de CSS Animaciones, consulte nuestro tutorial sobre CSS3 Animaciones .
Cuando una animación CSS juega, hay tres eventos que pueden ocurrir:
- animationstart - se produce cuando la animación CSS ha comenzado
- animationiteration - se produce cuando se repite la animación CSS
- animationend - se produce cuando la animación CSS ha completado
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el evento.
Los números seguidos por "webkit" o "moz" especifican la primera versión que trabajó con un prefijo.
Evento | |||||
---|---|---|---|---|---|
animationstart | 4.0 webkit | 10.0 | 16.0 5.0 MOZ | 4.0 webkit | 15.0 webkit 12.1 |
Nota: Para Chrome, Safari y Opera, utilice el prefijo webkitAnimationStart.
Sintaxis
object.addEventListener("webkitAnimationStart", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationstart", myScript );
// Standard syntax
Nota: El addEventListener() método no es compatible en Internet Explorer 8 y versiones anteriores.
Detalles técnicos
burbujas: | Sí |
---|---|
cancelable: | No |
Tipo de evento: | AnimationEvent |
DOM Versión: | Nivel 3 Eventos |
Páginas relacionadas
CSS Tutorial: CSS3 Animaciones
CSS Referencia: CSS3 animation Property
HTML DOM referencia: Style animation Property
<Objeto de evento