Element.animate()
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()
(en-US).
Síntaxis
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 (en-US) 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()
(en-US) y/o las siguientes opciones:id Opcional
-
Una propiedad única
animate()
para animar: unaDOMString
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.
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í:
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