animationiterationEvento

Ejemplo

Agregar un evento de escucha al elemento <div> cuando la animación CSS se reproduce nuevamente:

var x = document.getElementById("myDIV");

// Código para Chrome, Safari y Opera
x.addEventListener("webkitAnimationIteration", myStartFunction);

// Sintaxis estándar
x.addEventListener("animationiteration", myStartFunction);

Pruébalo »

Definición y uso

El evento animationiteration se activa cuando la animación CSS se reproduce nuevamente.

Si la propiedad CSSanimation-iteration-countse establece en "1", la animación se reproducirá solo una vez y el evento animationiteration ya no se activará.

Para obtener más información sobre las animaciones CSS, consulta nuestrocapítulo de animaciones CSS3.

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

animationstart- Se activa cuando comienza la animación CSS
animationiteration - Se activa cuando se repite la animación CSS
animationend- Se activa cuando finaliza la animación CSS

Soporte del navegador

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

El número especificado después de "webkit" o "moz" es la primera versión con prefijo que soporta este evento.

Evento
animationiteration	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("webkitAnimationIteration", myScript); // Código para Chrome, Safari y Opera
object.addEventListener("animationiteration", myScript); // Sintaxis estándar

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

Detalles técnicos