evento de início de animação
Exemplo
Faça algo com um elemento <div> quando uma animação CSS for iniciada:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// Standard syntax
x.addEventListener("animationstart", myStartFunction);
Definição e uso
O evento animationstart ocorre quando uma animação CSS começa a ser reproduzida.
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 | |||||
---|---|---|---|---|---|
animationstart | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Nota: Para Chrome, Safari e Opera, use o prefixo webkitAnimationStart.
Sintaxe
object.addEventListener("webkitAnimationStart", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationstart", 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