Evento animationiteration

Evento DOM Evento AnimationEvent

Definición y uso

El evento animationiteration se produce durante la repetición de animaciones CSS.

Si Atributo animation-iteration-count de CSSEstablecido en "1", indica que la animación se reproducirá solo una vez y no se producirá el evento animationiteration. La animación debe ejecutarse varias veces para activar este evento.

Si desea más información sobre las animaciones CSS, consulte nuestro Tutoriales de animación CSS3.

Pueden ocurrir tres eventos cuando CSS animación se reproduce:

Ejemplo

Haga algo con el elemento <div> cuando CSS animación se repita:

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

Prueba por tu cuenta

Sintaxis

object.addEventListener("webkitAnimationIteration", myScript);  // Código para Chrome, Safari y Opera
object.addEventListener("animationiteration", myScript);        // Sintaxis estándar

Notas:Internet Explorer 8 o versiones anteriores no lo soportan 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.

Los "webkit" o "moz" después de los números indican la primera versión con prefijo utilizada.

Evento Chrome IE Firefox Safari Opera
animationiteration 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 CSS:Atributo animation de CSS3

Manual de CSS:Atributo animation-iteration-count de CSS3

Manual de HTML DOM:Atributo animation del estilo

Evento DOM Evento AnimationEvent