¿Qué son las Web Animations?

Generalmente, cuando realizamos animaciones, recurrimos a utilizar CSS, ya que es la tecnología más apropiada para hacerlas. Sin embargo, en algunas situaciones puede quedarse corta o tener límites que con Javascript podríamos solucionar muy fácilmente. Pero desgraciadamente, realizar animaciones con Javascript, siempre es menos eficiente que hacerlas con CSS.

Al menos hasta ahora con Web Animations.

Es recomendable conocer previamente las animaciones CSS para entender mejor el concepto de Web Animations, por lo que si no las conoces, antes de continuar, lee el post Animaciones CSS.

WebAnimations

WebAnimations es una tecnología que incorpora Javascript, mediante la cuál podemos crear animaciones CSS, ayudándonos de una API de Javascript. De esta forma, las animaciones siguen siendo eficientes, pero podemos aprovechar la potencia y flexibilidad de un lenguaje de programación como Javascript.

La idea básica de WebAnimations es que podemos animar elementos del DOM, muy facilmente, simplemente utilizando el método .animate(), existente en cualquier elemento HTML.

const element = document.querySelector(".element");

const keyframes = [
  { transform: "translate(0, 0)" },
  { transform: "translate(200px, 0)" },
  { transform: "translate(0, 0)" }
];

const animation = element.animate(keyframes, 4000);

console.log(animation, typeof(animation), animation.constructor.name);

.element {
  width: 200px;
  height: 200px;
  background-color: indigo;
}

<div class="element"></div>

Observa que el método .animate() recibe como primer parámetro un array de objetos keyframes en el cuál tenemos definido, de forma similar a como haríamos en CSS, los estados por los que pasa la animación. Como segundo parámetro, en este caso recibe la duración, en milisegundos, sin embargo, ya veremos más adelante que también se le puede pasar un objeto de opciones para configurar la animación detalladamente.

Además, el método animate() devuelve un objeto Animation, del que hablaremos más adelante.

Ventajas de Web Animations

Probablemente, la pregunta más habitual tras descubrir Web Animations es... ¿Cuándo utilizar Animaciones CSS y cuando utilizar Web Animations?

• Las animaciones CSS son rápidas y eficientes, pero no se pueden controlar al 100%.
• Las Web Animations tienen mayor control, pero también mayor complejidad.
• Las Web Animations nos permiten animar fácilmente elementos del DOM.
• Las Web Animations son prácticamente igual de eficientes que las animaciones CSS y mucho más eficientes que librerías de terceros.

Así pues, en los siguientes artículos vamos a explicar como funcionan las WebAnimations detalladamente.

Alternativas a WebAnimations

Recuerda que utilizar WebAnimations es la forma más óptima y eficiente de crear animaciones desde Javascript, pero existen varias librerías de terceros que pueden ser muy sencillas para utilizar y crear animaciones, si por alguna razón WebAnimations no te convence: