Evento animationstart

Eventos DOM Evento AnimationEvent

Definição e uso

O evento animationstart ocorre quando a animação CSS começa a ser reproduzida.

Para mais informações sobre animações CSS, aprenda nosso Tutorial de animação CSS3。

Pode ocorrer três eventos quando a animação CSS estiver sendo reproduzida：

Exemplo

Faça algo com o elemento <div> quando a animação CSS começar：

var x = document.getElementById("myDIV");
// Código específico para Chrome, Safari e Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// Sintaxe padrão
x.addEventListener("animationstart", myStartFunction);

Experimente você mesmo

Sintaxe

object.addEventListener("webkitAnimationStart", myScript);  // Código específico para Chrome, Safari e Opera
object.addEventListener("animationstart", myScript);        // Sintaxe padrão

Comentário：Internet Explorer 8 ou versões anteriores não suportam Método addEventListener()。

Detalhes técnicos

Bubbling： Suportado
Cancellable： Não suportado
Tipo de evento： Evento AnimationEvent
Versão 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 com suporte ao prefixo.

Evento Chrome IE Firefox Safari Opera
animationstart 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

Comentário：Para Chrome, Safari e Opera, use webkitAnimationEnd.

Páginas relacionadas

Tutorial CSS：Animação CSS3

Manual de referência CSS：Propriedade animation do CSS3

Manual de referência do HTML DOM:Propriedade animation do Style

Eventos DOM Evento AnimationEvent