Evento animationiteration

Eventos DOM AnimationEvent

Definição e uso

O evento animationiteration ocorre durante a repetição da animação CSS.

Se Propriedade animation-iteration-count do CSSDefinido como "1", isso significa que a animação será reproduzida apenas uma vez e não ocorrerá o evento animationiteration. A animação precisa ser executada várias vezes para acionar esse evento.

Para obter mais informações sobre animações CSS, aprenda com nossos Tutorial de animação CSS3.

Três eventos podem ocorrer quando a animação CSS estiver sendo reproduzida:

Exemplo

Quando a animação CSS repetir, faça algo com o elemento <div>:

var x = document.getElementById("myDIV");
// Código específico para Chrome, Safari e Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Sintaxe padrão
x.addEventListener("animationiteration", myRepeatFunction);

Experimente você mesmo

Sintaxe

object.addEventListener("webkitAnimationIteration", myScript);  // Código específico para Chrome, Safari e Opera
object.addEventListener("animationiteration", myScript);        // Sintaxe padrão

Notas:Internet Explorer 8 ou versões anteriores não suportam Método addEventListener().

Detalhes Técnicos

Bubbling: Suportado
Cancelável: Não suportado
Tipo de Evento: AnimationEvent
Versão DOM: Eventos de Nível 3

Suporte do Navegador

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

Os "webkit" ou "moz" após os números indicam a primeira versão com suporte ao prefixo.

Eventos 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 e Opera, use webkitAnimationEnd.

Páginas Relacionadas

Tutorial CSS:Animação CSS3

Manual de Referência CSS:Propriedade de animação CSS3

Manual de Referência CSS:Propriedade de iteração de animação CSS3

Manual de Referência HTML DOM:Propriedade animation do Style

Eventos DOM AnimationEvent