Animation.startTime

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

La propiedad Animation.startTime de la interfaz Animación es un valor de punto flotante de doble precisión que indica el tiempo programado en el que debe comenzar la reproducción de una animación.

El start time (tiempo de inicio) es el valor de tiempo de su DocumentTimelinecuando su objetivo KeyframeEffect está programado para comenzar la reproducción. El start time (tiempo de inicio) de una animación inicialmente no está resuelto (lo que significa que es null porque no tiene valor).

Sintaxis

js
var animationStartedWhen = Animation.startTime;

Animation.startTime = newStartTime;

Valor

Un número de punto flotante que representa el tiempo actual en milisegundos, o nulo si no se establece ningún valor de tiempo. Puede leer este valor para determinar en qué momento está establecido el punto de inicio, y puede modificarlo para que la animación comience en un momento diferente.

Ejemplos

En el ejemplo Running on Web Animations API example, podemos sincronizar todos los nuevos gatos animados dándoles el mismo tiempo de inicio startTime que el gato original:

js
var catRunning = document
  .getElementById("withWAAPI")
  .animate(keyframes, timing);

/* Una función que crea nuevos gatos. */
function addCat() {
  var newCat = document.createElement("div");
  newCat.classList.add("cat");
  return newCat;
}

/* Esta es la función que agrega un gato a la columna WAAPI */
function animateNewCatWithWAAPI() {
  // crea unnuevo gato
  var newCat = addCat();

  // Animar a dicho gato con la función "animate" de WAAPI
  var newAnimationPlayer = newCat.animate(keyframes, timing);

  // Establece que el punto de inicio de la animación sea el mismo que el original .cat#withWAAPI
  newAnimationPlayer.startTime = catRunning.startTime;

  // Agrega el gato a la pila.
  WAAPICats.appendChild(newCat);
}

Especificaciones

Specification
Web Animations
# dom-animation-starttime

Compatibilidad con navegadores

Ver también