animationstartEvento

Ejemplo

Añade un evento de escucha al elemento <div> cuando la animación CSS comience a reproducirse:

var x = document.getElementById("myDIV"); //Código para Chrome, Safari y Opera x.addEventListener("webkitAnimationStart", myStartFunction); //Sintaxis estándar x.addEventListener("animationstart", myStartFunction);

Pruébalo »

Definición y uso

El evento animationstart se dispara cuando la animación CSS comienza a reproducirse.

Para más contenido sobre animaciones CSS, consulta nuestraAnimaciones CSS3sección.

Cuando se reproduce una animación CSS, ocurren los siguientes tres eventos:

animationstart: se dispara después de que comienza la animación CSS
animationiteration- se dispara cuando la animación CSS se repite
animationend- se dispara cuando la animación CSS se completa

Soporte del navegador

Los números en la tabla indican la versión del navegador que soporta por primera vez el evento.

El número especificado después de "webkit" o "moz" indica la versión con el prefijo que soporta por primera vez el evento.

Evento
animationstart	4.0 webkit	10.0	16.0 5.0 moz	4.0 webkit	15.0 webkit 12.1

Nota:Los navegadores Chrome, Safari y Opera usan el prefijo webkitAnimationEnd.

Sintaxis

object.addEventListener("webkitAnimationStart", myScript);  // Chrome, Safari 与 Opera 语法
object.addEventListener("animationstart", myScript);        // 标准语法

Nota:Internet Explorer 8 y versiones anteriores de IE no soportanaddEventListener()el método.

Detalles técnicos