Evento animationend
Definição e uso
O evento animationend ocorre quando a animação CSS é concluída.
Para mais informações sobre animações CSS, aprenda nossa Tutorial de Animação CSS3.
Três eventos podem ocorrer enquanto a animação CSS estiver sendo reproduzida:
- animationstart - Quando a animação CSS começar, ocorre
- animationiteration - Quando a animação CSS se repetir, ocorre
- animationend - Quando a animação CSS for concluída, ocorre
Exemplo
Faça algo com o elemento <div> quando a animação CSS terminar:
var x = document.getElementById("myDIV");
// Código específico para Chrome, Safari e Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Sintaxe padrão
x.addEventListener("animationend", myEndFunction);
Sintaxe
object.addEventListener("webkitAnimationEnd", myScript); // Código específico para Chrome, Safari e Opera
object.addEventListener("animationend", myScript); // Sintaxe padrão
Notas:Internet Explorer 8 e versões anteriores não suportam Método addEventListener().
Detalhes técnicos
| Popping: | Suportado |
|---|---|
| Cancelável: | Não suportado |
| Tipo de evento: | Evento AnimationEvent |
| Versão do 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.
O "webkit" ou "moz" após o número indica a primeira versão do prefixo usado.
| Evento | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| animationend | 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 de CSS：Animação CSS3
Manual de referência do CSS:Propriedade animation do CSS3
Manual de referência do HTML DOM:Propriedade animation do Style
