Propiedad elapsedTime del evento AnimationEvent

Eventos DOM AnimationEvent

Definición y uso

La propiedad elapsedTime devuelve los segundos transcurridos de la animación cuando ocurre un evento de animación.

Notas:El valor devuelto no se ve afectado si la animación se pausa (mediante la propiedad CSS animation-delay).

Notas:Para Evento animationstartSiempre devuelve "0".

Notas:Este atributo es de solo lectura.

Ejemplo

Determinar cuántos segundos ha durado la animación:

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

Prueba por tu cuenta

Sintaxis

event.elapsedTime

Detalles técnicos

Valor devuelto: Valor numérico que representa la cantidad de segundos que se ejecuta la animación.

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente el atributo.

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

Páginas relacionadas

Manual de referencia del DOM HTML:Evento animationstart

Manual de referencia del DOM HTML:Evento animationiteration

Manual de referencia del DOM HTML:Evento animationend

Manual de referencia del DOM HTML:Propiedad animationName de AnimationEvent

Manual de referencia de CSS:Atributo animation de CSS3

Manual de referencia de CSS:Atributo animation-duration de CSS3

Eventos DOM AnimationEvent