evento de iteração de animação
Exemplo
Faça algo com um elemento <div> quando uma animação CSS for repetida:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
Definição e uso
O evento animationiteration ocorre quando uma animação CSS é repetida.
Se a propriedade CSS animation-iteration-count estiver definida como "1", o que significa que a animação será reproduzida apenas uma vez, o evento animationiteration não ocorrerá. A animação precisa ser executada mais de uma vez para que este evento seja acionado.
Para obter mais informações sobre animações CSS, consulte nosso tutorial sobre animações CSS3 .
Quando uma animação CSS é reproduzida, três eventos podem ocorrer:
- animationstart - ocorre quando a animação CSS é iniciada
- animação iteração - ocorre quando a animação CSS é repetida
- animationend - ocorre quando a animação CSS é concluída
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao evento.
Números seguidos por "webkit" ou "moz" especificam a primeira versão que funcionou com um prefixo.
Event | |||||
---|---|---|---|---|---|
animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Observação: para Chrome, Safari e Opera, use o prefixo webkitAnimationIteration.
Sintaxe
object.addEventListener("webkitAnimationIteration", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationiteration", myScript); // Standard syntax
Observação: o método addEventListener() não é compatível com o Internet Explorer 8 e versões anteriores.
Detalhes técnicos
Bolhas: | sim |
---|---|
Cancelável: | Não |
Tipo de evento: | Evento de animação |
Versão DOM: | Eventos de Nível 3 |
Páginas relacionadas
Tutorial CSS: Animações CSS3
Referência CSS: propriedade de animação CSS3
Referência CSS: propriedade CSS3 animation-iteration-count
Referência HTML DOM: propriedade de animação de estilo