Propriedade elapsedTime do evento AnimationEvent

Eventos DOM AnimationEvent

Definição e uso

A propriedade elapsedTime retorna o número de segundos que a animação já rodou, quando um evento de animação ocorre.

Notas:Se a animação for pausada (usando a propriedade CSS animation-delay), o valor de retorno não é afetado.

Notas:Para Evento animationstart，este atributo sempre retorna "0".

Notas:Este atributo é apenas de leitura.

Exemplo

Determinar quantos segundos a animação durou:

var x = document.getElementById("myDIV");
x.addEventListener("animationiteration", myRepeatFunction);
function myRepeatFunction(event) {
  this.innerHTML = "Tempo decorrido: " + event.elapsedTime;
}

Experimente você mesmo

Sintaxe

evento.elapsedTime

Detalhes técnicos

Retorno: Valor numérico, representando o número de segundos que a animação roda.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente o atributo.

Atributo Chrome IE Firefox Safari Opera
elapsedTime Suporte 10.0 6.0 Suporte Suporte

Páginas relacionadas

Manual de referência do HTML DOM:Evento animationstart

Manual de referência do HTML DOM:Evento animationiteration

Manual de referência do HTML DOM:Evento animationend

Manual de referência do HTML DOM:Propriedade animationName do AnimationEvent

Manual de referência do CSS:Propriedade animation do CSS3

Manual de referência do CSS:Propriedade animation-duration do CSS3

Eventos DOM AnimationEvent