Evento animationstart
Definición y uso
El evento animationstart ocurre cuando se inicia la reproducción de la animación CSS.
Para obtener más información sobre las animaciones CSS, aprende en nuestros Tutoriales de animación CSS3。
Pueden ocurrir tres eventos cuando se reproduce la animación CSS：
- animationstart - Se produce cuando comienza la animación CSS
- animationiteration - Se produce cuando la animación CSS se repite
- animationend - Se produce cuando la animación CSS se completa
Ejemplo
Haga algo con el elemento <div> cuando comience la animación CSS：
var x = document.getElementById("myDIV");
// Código específico para Chrome, Safari y Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// Sintaxis estándar
x.addEventListener("animationstart", myStartFunction);
Sintaxis
object.addEventListener("webkitAnimationStart", myScript); // Código específico para Chrome, Safari y Opera
object.addEventListener("animationstart", myScript); // Sintaxis estándar
Notas：Internet Explorer 8 o versiones anteriores no lo admiten Método addEventListener()。
Detalles técnicos
| Burbuja： | Soportado |
|---|---|
| Cancelable： | No soportado |
| Tipo de evento： | Evento AnimationEvent |
| Versión de DOM： | Eventos de Nivel 3 |
Compatibilidad del navegador
Los números en la tabla indican la primera versión del navegador que admite completamente el evento.
El "webkit" o "moz" detrás de los números indica la primera versión del prefijo utilizado.
| Eventos | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| animationstart | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Notas：Para Chrome, Safari y Opera, utilice webkitAnimationEnd。
Páginas relacionadas
Tutoriales de CSS：Animación CSS3
Manual de referencia de CSS：Atributo animation del CSS3
Manual de referencia del DOM HTML:Atributo animation del estilo
