Propiedad AnimationEvent elapsedTime
Ejemplo
Averigüe cuántos segundos se ha estado ejecutando una animación:
var x = document.getElementById("myDIV");
x.addEventListener("animationiteration", myRepeatFunction);
function myRepeatFunction(event) {
this.innerHTML = "Elapsed time: " + event.elapsedTime;
}
Definición y uso
La propiedad elapsedTime devuelve el número de segundos que se ha estado ejecutando una animación, cuando ocurre un evento de animación.
Nota: El valor de retorno no se ve afectado si la animación está en pausa (mediante el uso de la propiedad CSS animation-delay).
Nota: Para el evento animationstart , esta propiedad siempre devuelve "0".
Esta propiedad es de sólo lectura.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
elapsedTime | Yes | 10.0 | 6.0 | Yes | Yes |
Sintaxis
event.elapsedTime
Detalles técnicos
Valor de retorno: | Un número, que representa el número de segundos que se ha estado ejecutando una animación. |
---|
páginas relacionadas
Referencia HTML DOM: El evento animationstart
Referencia HTML DOM: el evento de iteración de animación
Referencia HTML DOM: el evento animationend
Referencia HTML DOM: propiedad AnimationEvent animationName
Referencia de CSS: propiedad de animación CSS3
Referencia de CSS: Propiedad de duración de animación CSS3