Element.animate()

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.

El método animate() de la interfaz Element es un método abreviado el cual crea un nuevo Animation, aplicado al elemento, luego reproduce la animación. Devuelve la instancia creada de un objeto Animation.

Nota: Los elementos pueden tener multiples animaciones aplicadas a ellos. Puedes obtener una lista de las animaciones que afectan a un elemento llamando a Element.getAnimations().

Síntaxis

js
animate(keyframes, options);

Parámetros

keyframes

Puede ser un arreglo de objetos de fotogramas clave o un objeto de fotogramas clave cuyas propiedades son arreglos de valores a iterar. Ver Keyframe Formats para más detalles.

options

Puede ser un entero representando la duración de la animación (en milisegundos), o un objeto que contiene una o más propiedades acerca del tiempo descritas en los los parametros de opciones del KeyframeEffect() y/o las siguientes opciones:

id Opcional

Una propiedad única animate() para animar: una DOMString la cual hace referencia a la animación.

Valor de retorno

Regresa una Animation.

Ejemplos

En la demostración Down the Rabbit Hole (con la API de Animaciones Web), utilizamos el método conveniente, animate() para inmediatamente crear y reproducir una animación en el elemento #tunnel para hacerlo fluir hacia arriba, indefinidamente. Observa el arreglo de los objetos enviados como fotogramas clave y también el bloque de opciones de sincronización.

js
document.getElementById("tunnel").animate(
  [
    // fotogramas clave
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    // opciones de sincronización
    duration: 1000,
    iterations: Infinity,
  },
);

Implicito a/desde fotogramas clave

En versiones más recientes de navegadores, se te permite declarar el estado de inicio o fin únicamente para una animación (por ejemplo: un simple fotograma clave), y el navegador inferirá la otra parte de la animación si está habilitado. Por ejemplo, considera esta simple animación — el objeto de fotograma clave se ve así:

js
let rotate360 = [{ transform: "rotate(360deg)" }];

Solamente hemos especificado el fin del estado de la animación, y el estado inicial está implícito.

Especificaciones

Specification
Web Animations
# dom-animatable-animate

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también