Exemplo
Faça algo com um <div> elemento quando uma animação CSS terminou:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
//
Standard syntax
x.addEventListener("animationend", myEndFunction); Tente você mesmo " Definição e Uso
O evento animationend ocorre quando uma animação CSS foi concluída.
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 | |||||
|---|---|---|---|---|---|
| animationend | 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 webkitAnimationEnd.
Sintaxe
object.addEventListener("webkitAnimationEnd", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationend", myScript );
// Standard syntax
Nota: O addEventListener() método não é suportado no Internet Explorer 8 e versões anteriores.
Detalhes técnicos
| Bolhas: | sim |
|---|---|
| cancelable: | Não |
| Tipo de evento: | AnimationEvent |
| DOM Versão: | Nível 3 Eventos |
Páginas relacionadas
Tutorial CSS: CSS3 animações
CSS Referência: CSS3 animation Property
HTML DOM referência: Style animation Property
<Objeto de evento