Comparación entre las animaciones de CSS y JavaScript

Puedes animar con CSS o JavaScript. ¿Cuál deberías usar y por qué?

Sam Thorogood

Existen dos formas principales de crear animaciones en la Web: con CSS y con JavaScript. La que elijas depende realmente de las otras dependencias de tu proyecto y de los tipos de efectos que intentes lograr.

Resumen

  • Usa animaciones de CSS para transiciones "únicas" más simples, como activar o desactivar los estados de los elementos de la IU.
  • Usa animaciones de JavaScript cuando quieras tener efectos avanzados, como rebote, detención, pausa, retroceso o ralentización.
  • Si decides animar con JavaScript, usa la API de Web Animations 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 la cantidad de esfuerzo y tiempo difiere (consulta también Rendimiento de CSS en comparación con JavaScript). Cada uno tiene sus ventajas y desventajas, pero estos son buenos lineamientos:

  • Usa CSS cuando tengas estados más pequeños y autónomos para los elementos de la IU. Las transiciones y animaciones de CSS son ideales para mostrar un menú de navegación desde el costado o mostrar una información sobre herramientas. Es posible que termines usando JavaScript para controlar los estados, pero las animaciones estarán en tu CSS.
  • Usa JavaScript cuando necesites un control significativo sobre tus animaciones. La API de Web Animations es el enfoque basado en estándares, disponible en la actualidad 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, ralentizar o revertir tus animaciones.
  • Usa requestAnimationFrame directamente cuando quieras organizar una escena completa de forma manual. Este es un enfoque avanzado de JavaScript, pero puede ser útil si estás compilando un juego o dibujando en un lienzo HTML.

Como alternativa, si ya usas un framework de JavaScript que incluye funcionalidad de animación, como a través del método .animate() de jQuery o TweenMax de GreenSock, es posible que te resulte más conveniente usar ese framework para tus animaciones.

Anima con CSS

Animar con CSS es la forma más sencilla de hacer que algo se mueva en la pantalla. Este enfoque se describe como declarativo, ya que especificas lo que te gustaría que sucediera.

A continuación, se muestra un código CSS que mueve un elemento 100px en los ejes X e Y. Para ello, se usa una transición de CSS que está configurada para tomar 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, hay opciones para la aceleración, que es, en esencia, la sensación de la animación. Para obtener más información sobre la suavización, consulta la guía Conceptos básicos de la suavización.

Si, como en el fragmento anterior, creas clases de CSS separadas para administrar tus animaciones, puedes usar JavaScript para activar y desactivar cada animación:

box.classList.add('move');

Hacer esto proporciona un buen equilibrio a tus apps. Puedes enfocarte en administrar el estado con JavaScript y simplemente establecer las clases adecuadas en los elementos de destino, lo que permite que el navegador controle las animaciones. Si eliges esta opción, puedes escuchar eventos transitionend en el elemento, pero solo si puedes renunciar a la compatibilidad con versiones anteriores de Internet Explorer. La versión 10 fue la primera en admitir estos eventos. Todos los demás navegadores admiten el evento desde hace tiempo.

El código JavaScript necesario para detectar el final de una transición se ve de la siguiente manera:

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

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

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

Por ejemplo, puedes animar el cuadro de la misma manera con transiciones, pero que se anime sin ninguna interacción del usuario, como hacer clic, y con repeticiones infinitas. 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

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

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

Crea animaciones con JavaScript y la API de Web Animations

En comparación, crear animaciones con JavaScript es más complejo que escribir transiciones o animaciones de CSS, pero suele brindar a los desarrolladores mucha más potencia. Puedes usar la API de Web Animations para animar propiedades CSS específicas o compilar objetos de efectos componibles.

Las animaciones de JavaScript son imperativas, ya que las escribes intercaladas como parte de tu código. También puedes encapsularlos dentro de otros objetos. A continuación, se muestra el código JavaScript que deberías escribir para volver a crear la transición de CSS que se describió 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ó, debes modificar sus diseños subyacentes cuando finalice la animación, como se muestra en nuestro ejemplo.

Probar

La API de Web Animations es un estándar relativamente nuevo del 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, tienes el control total de los estilos de un elemento en cada paso. Esto significa que puedes ralentizar las animaciones, pausarlas, detenerlas, revertirlas y manipular los elementos como mejor te parezca. Esto es especialmente útil si compilas aplicaciones complejas y orientadas a objetos, ya que puedes encapsular tu comportamiento de forma adecuada.