animationiteration Evento

Exemplo

Faça algo com um <div> elemento quando uma animação CSS é repetido:

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

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);

// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);

Tente você mesmo "

Definição e Uso

O evento animationiteration ocorre quando uma animação CSS é repetido.

Se a CSS animationiteration-count propriedade é definida como "1" , o que significa que a animação só será reproduzida uma vez, o evento animationiteration não ocorre. A animação precisa ser executado mais de uma vez para este evento para disparar.

Para mais informações sobre CSS animações, consulte o nosso tutorial sobre CSS3 animações .

Quando uma animação CSS desempenha, há três eventos que podem ocorrer:

animationstart - ocorre quando a animação CSS começou
animationiteration - ocorre quando a animação CSS é repetido
animationend - ocorre quando a animação CSS completou

Suporte navegador

Os números na tabela especificar a primeira versão do navegador que suporta totalmente o evento.

Números seguido por "webkit" ou "moz" especificar a primeira versão que trabalhou com um prefixo.

Evento
animationiteration	4.0 webkit	10.0	16,0 5.0 Moz	4.0 webkit	15,0 -webkit 12.1

Nota: Para Chrome, Safari e Opera, utilize o prefixo webkitAnimationIteration.

Sintaxe

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

Nota: O addEventListener() método não é suportado no Internet Explorer 8 e versões anteriores.