evento de iteración de animación
Ejemplo
Haz algo con un elemento <div> cuando se repite una animación CSS:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
Definición y uso
El evento de iteración de animación ocurre cuando se repite una animación CSS.
Si la propiedad animation-iteration-count de CSS se establece en "1", lo que significa que la animación solo se reproducirá una vez, el evento de iteración de animación no se produce. La animación debe ejecutarse más de una vez para que se active este evento.
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 | |||||
---|---|---|---|---|---|
animationiteration | 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 webkitAnimationIteration.
Sintaxis
object.addEventListener("webkitAnimationIteration", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationiteration", 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 de CSS: propiedad CSS3 animation-iteration-count
Referencia HTML DOM: propiedad de animación de estilo