Los últimos tutoriales de desarrollo web
 

animationiteration Evento

<Objeto de evento

Ejemplo

Hacer algo con un <div> elemento 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);
Inténtalo tú mismo "

Definición y Uso

El evento animationiteration se produce cuando se repite una animación CSS.

Si el CSS animationiteration-recuento propiedad se establece en "1" , lo que significa que la animación sólo se juega una vez, no se produce el evento animationiteration. La animación tiene que ejecutar más de una vez para que este evento se dispara.

Para obtener más información acerca de CSS Animaciones, consulte nuestro tutorial sobre CSS3 Animaciones .

Cuando una animación CSS juega, hay tres eventos que pueden ocurrir:

  • animationstart - se produce cuando la animación CSS ha comenzado
  • animationiteration - se produce cuando se repite la animación CSS
  • animationend - se produce cuando la animación CSS ha completado

Soporte del 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 por "webkit" o "moz" especifican la primera versión que trabajó con un prefijo.

Evento
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, utilice el prefijo webkitAnimationIteration.


Sintaxis

object.addEventListener("webkitAnimationIteration", myScript );  // Code for Chrome, Safari and Opera
object
.addEventListener("animationiteration", myScript );        // Standard syntax

Nota: El addEventListener() método no es compatible en Internet Explorer 8 y versiones anteriores.


Detalles técnicos

burbujas:
cancelable: No
Tipo de evento: AnimationEvent
DOM Versión: Nivel 3 Eventos

Páginas relacionadas

CSS Tutorial: CSS3 Animaciones

CSS Referencia: CSS3 animation Property

CSS Referencia: CSS3 animation-iteration-count Property

HTML DOM referencia: Style animation Property


<Objeto de evento