Animationend Event
Exemplo
Faça algo com um elemento <div> quando uma animação CSS terminar:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
Definição e uso
O evento animationend ocorre quando uma animação CSS é concluída.
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 | |||||
---|---|---|---|---|---|
animationend | 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 webkitAnimationEnd.
Sintaxe
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", 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 HTML DOM: propriedade de animação de estilo