Evento de inicio de animación
Ejemplo
Haga algo con un elemento <div> cuando haya comenzado una animación CSS:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// Standard syntax
x.addEventListener("animationstart", myStartFunction);
Definición y uso
El evento animationstart ocurre cuando una animación CSS ha comenzado a reproducirse.
Para obtener más información sobre animaciones CSS, consulte nuestro tutorial sobre animaciones CSS3 .
Cuando se reproduce una animación CSS, pueden ocurrir tres eventos:
- animationstart: ocurre cuando la animación CSS ha comenzado
- animationiteration : ocurre cuando se repite la animación CSS
- animationend : ocurre cuando la animación CSS se ha completado
Compatibilidad con 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 de "webkit" o "moz" especifican la primera versión que funcionó con un prefijo.
Event | |||||
---|---|---|---|---|---|
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, use el prefijo webkitAnimationStart.
Sintaxis
object.addEventListener("webkitAnimationStart", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationstart", myScript); // Standard syntax
Nota: el método addEventListener() no es compatible con Internet Explorer 8 y versiones anteriores.
Detalles técnicos
Burbujas: | sí |
---|---|
Cancelable: | No |
Tipo de evento: | AnimaciónEvento |
Versión DOM: | Eventos de nivel 3 |
páginas relacionadas
Tutorial CSS: Animaciones CSS3
Referencia CSS: propiedad de animación CSS3
Referencia HTML DOM: propiedad de animación de estilo