Comparación entre las animaciones de CSS y JavaScript

Puedes realizar animaciones con CSS o JavaScript. ¿Cuál debes utilizar y por qué?

Paul Lewis

Sam Thorogood

Existen dos formas principales de crear animaciones en la Web: con CSS y con JavaScript. La elección de uno u otro dependerá principalmente de las otras dependencias de tu proyecto y de los tipos de efectos que intentes lograr.

Resumen

• Usa animaciones de CSS para realizar transiciones más simples de "una sola acción", como alternar los estados de los elementos de la IU.
• Usa las animaciones de JavaScript cuando desees agregar efectos avanzados como rebotes, detenciones, pausas, rebobinados o disminuciones de velocidad.
• Si decides realizar animaciones con JavaScript, usa la Web Animations API o un framework moderno con el que te sientas cómodo.

La mayoría de las animaciones básicas se pueden crear con CSS o JavaScript, pero el nivel de esfuerzo y tiempo variarán (consulta también Rendimiento de CSS en comparación con JavaScript). Cada uno tiene ventajas y desventajas, pero las siguientes son algunas buenas pautas:

• Usa CSS cuando tienes estados más pequeños e independientes para los elementos de la IU. Las transiciones y animaciones de CSS son ideales para incorporar un menú de navegación desde el lateral o para mostrar información sobre herramientas. Tal vez necesites usar JavaScript para controlar los estados, pero las animaciones estarán en tu CSS.
• Usa JavaScript cuando necesites un nivel significativo de control sobre tus animaciones. La Web Animations API es el enfoque basado en estándares, hoy disponibles en la mayoría de los navegadores modernos. Esto proporciona objetos reales, ideales para aplicaciones complejas orientadas a objetos. JavaScript también es útil cuando necesitas detener, pausar, reducir la velocidad o invertir tus animaciones.
• Usa requestAnimationFrame directamente cuando quieras organizar toda una escena de forma manual. Este es un enfoque avanzado de JavaScript, pero puede resultar útil si desarrollas un juego o dibujas en un lienzo HTML.

De manera alternativa, si ya usas un framework de JavaScript en el que se incluya una funcionalidad de animación, como con el método .animate() de jQuery o TweenMax de GreenSock, tal vez te resulte más práctico seguir usándolo para tus animaciones.

Animaciones con CSS

Animar con CSS es la forma más simple de lograr que un objeto se mueva en la pantalla. Este enfoque se describe como declarativo, porque especificas lo que deseas que suceda.

A continuación, se muestra un fragmento de CSS que mueve un elemento 100px en los ejes X e Y. Esto se realiza usando una transición de CSS que se configura para demorar 500ms. Cuando se agrega la clase move, se cambia el valor transform y comienza la transición.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

Probar

Además de la duración de la transición, existen opciones para la aceleración, que es básicamente la sensación transmitida por la animación. Para obtener más información sobre la aceleración, consulta la guía Conceptos básicos de la aceleración.

Si, al igual que en el siguiente fragmento, creas clases de CSS por separado para administrar tus animaciones, puedes usar JavaScript para activar o desactivar cada animación:

box.classList.add('move');

Esto proporciona un buen equilibrio a tus apps. Puedes centrarte en administrar el estado con JavaScript y simplemente configurar las clases adecuadas en los elementos de destino, dejando así que el navegador se encargue de las animaciones. Si sigues este camino, podrás escuchar los eventos transitionend en el elemento, pero solo si eres capaz de renunciar a la compatibilidad con versiones anteriores de Internet Explorer. La versión 10 fue la primera en ser compatible con estos eventos. Todos los demás navegadores fueron compatibles con el evento durante algún tiempo.

El código JavaScript necesario para escuchar el final de una transición se ve así:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

Además de usar las transiciones de CSS, también puedes usar las animaciones de CSS, que te permiten tener mucho más control sobre los fotogramas clave, las duraciones y las iteraciones de animaciones individuales.

Nota: Si es la primera vez que realizas animaciones, te contamos que el término “marco clave” es una denominación que se usaba anteriormente en las animaciones realizadas a mano. Los animadores creaban marcos específicos para una parte de la acción, que llevaban este nombre, en los que capturaban acciones como la parte más extrema de cierto movimiento, y luego dibujaban todos los marcos individuales entre los marcos clave. En la actualidad, tenemos un proceso similar para las animaciones de CSS, en el que le indicamos al navegador los valores de las propiedades de CSS que se deben tener en determinados puntos y, luego, el navegador completa los espacios vacíos.

Por ejemplo, puedes animar el cuadro del mismo modo que las transiciones, pero puedes hacer que se mueva sin la interacción del usuario, como clics, y con una cantidad infinita de repeticiones. También puedes cambiar varias propiedades al mismo tiempo.

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

Probar

En las animaciones de CSS, defines la animación independientemente del elemento de destino y usas la propiedad animation-name para elegir la animación necesaria.

Si deseas que tus animaciones de CSS funcionen en navegadores más antiguos, deberás agregar prefijos de proveedores. Existen muchas herramientas que pueden ayudarte a crear las versiones con prefijos del CSS que necesites, lo que te permitirá escribir la versión sin prefijo en tus archivos de origen.

Animaciones con JavaScript y la API de Web Animations

Crear animaciones con JavaScript es, en comparación, más complejo que escribir transiciones o animaciones de CSS, pero generalmente les proporciona a los programadores mucho más poder. Puedes usar la API de animaciones web para animar propiedades CSS específicas o crear objetos de efecto componible.

Las animaciones de JavaScript son imperativas, ya que las escribes de forma intercalada como parte de tu código. También puedes encapsularlas dentro de otros objetos. A continuación, se muestra el fragmento de JavaScript que debes escribir para recrear la transición de CSS que se menciona anteriormente:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

De forma predeterminada, las animaciones web solo modifican la presentación de un elemento. Si deseas que tu objeto permanezca en la ubicación a la que se movió, entonces debes modificar los estilos subyacentes cuando la animación haya finalizado, según nuestro ejemplo.

Probar

La Web Animations API es un estándar relativamente nuevo de W3C. Es compatible de forma nativa con la mayoría de los navegadores modernos. Para los navegadores modernos que no son compatibles, hay un polyfill disponible.

Con las animaciones de JavaScript, puedes controlar totalmente los estilos de un elemento en cada paso. Esto significa que puedes reducir la velocidad de las animaciones, pausarlas, detenerlas, invertirlas y manipular elementos según lo creas conveniente. Esto es especialmente útil si creas aplicaciones complejas orientadas a objetos, ya que puedes encapsular de forma adecuada tu comportamiento.