AnimationEvent

Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A interface AnimationEvent representa eventos provendo informações relacionadas a animações.



  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/pt-BR/docs/Web/API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25  86,20  86,30  76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/pt-BR/docs/Web/API/AnimationEvent" target="_top"><rect x="116" y="1" width="140" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="186" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">AnimationEvent</text></a></svg></div>


  a:hover text { fill: #0095DD; pointer-events: all;}

Propriedades

Também propriedades herdadas pelo pai Event.

AnimationEvent.animationName Somente leitura: O DOMString contém o valor do animation-name propriedade CSS associada com a transição.
AnimationEvent.elapsedTime Somente leitura: É um ponto flutuante dado pela quantidade de tempo que a animação está rodando, em segundos, quando esse evento termina, excluindo o tempo em que animação esteve pausada. Para o evento "animationstart", elapsedTime é 0.0 a não ser que haja um valor negativo para animation-delay, nesse caso o evento terminará com elapsedTime contendo (-1 * delay).
AnimationEvent.pseudoElement Somente leitura: Um DOMString começa com '::', contendo o nome do pseudo-elemento onde a animação roda. Se a animação não rodar no pseudo-elemento mas no elemento, então teremos um string vazio ' '.

Constructores

AnimationEvent(): Cria um evento AnimationEvent com os dados parâmetros.

Métodos

Também herda métodos do pai Event.

AnimationEvent.initAnimationEvent(): Inicializa um AnimationEvent criado usando diminuído Document.createEvent("AnimationEvent") método.

Especificações

Especificação	Estado	Comentário
CSS Animations The definition of 'AnimationEvent' in that specification.	Rascunho atual	Definição inicial.

Compatibilidade com o Navegador

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Desktop
Dispositivo móvel

Característica	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0 webkit 43.0	6.0 (6.0)	10.0	12 o 12.10 15.0 webkit	4.0 webkit
AnimationEvent() constructor	43.0	23.0 (23.0)	Não suportado	Não suportado	Não suportado
initAnimationEvent()	1.0	6.0 (6.0) Removed in 23.0 (23.0)	10.0	12	4.0
pseudoelement	Não suportado	23.0 (23.0)	Não suportado	Não suportado	Não suportado

Característica	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	(Yes)webkit	6.0 (6.0)	10.0	12 o 12.10 15.0 webkit	(Yes)webkit	43.0
AnimationEvent() constructor	Não suportado	23.0 (23.0)	Não suportado	Não suportado	Não suportado	43.0
initAnimationEvent()	(Yes)	6.0 (6.0) Removed in 23.0 (23.0)	10.0	(Yes)	(Yes)	Não suportado
pseudoelement	Não suportado	23.0 (23.0)	Não suportado	Não suportado	Não suportado	Não suportado

Veja também

Usando animações CSS