Comparación entre las animaciones de CSS y JavaScript

Puedes realizar animaciones con CSS o JavaScript. ¿Cuál deberías usar 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 lograr "una sola acción" más simple de las transiciones, como alternar los estados de los elementos de la IU.
• Usa las animaciones de JavaScript cuando quieras agregar efectos avanzados como rebotes, detenciones, pausas, rebobinados o disminuciones de velocidad.
• Si decides realizar animaciones con JavaScript, usa la API de animaciones web 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 varían (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 tengas estados independientes más pequeños 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 la herramienta. 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 animaciones web es el enfoque basado en estándares, disponible hoy en día en la mayoría de los navegadores actualizados. Esto proporciona objetos reales, ideales para aplicaciones complejas orientadas a objetos. JavaScript también es útil cuando necesitas detener, pausar, ralentizar o invertir tus animaciones.
• Usa requestAnimationFrame directamente cuando quieras organizar una escena completa de forma manual. Este es un enfoque avanzado de JavaScript, pero puede resultar útil si creas un juego o dibujas 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 GreenSock's TweenMax, entonces puede que, en general, te resulte más conveniente seguir usando eso para tus animaciones.

Animaciones con CSS

Realizar animaciones con CSS es la forma más sencilla 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 muestran algunas CSS que mueven un elemento 100px en los ejes X e Y. Esto se realiza con 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, existen opciones para la aceleración, que es, en esencia, cómo se siente 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 fragmento anterior, creas clases de CSS separadas para administrar tus animaciones, puedes usar JavaScript para activar o desactivar cada animación:

box.classList.add('move');

Esto proporciona un buen equilibrio para tus apps. Puedes enfocarte en administrar el estado con JavaScript y simplemente establecer las clases adecuadas en los elementos de destino, lo que hará que el navegador se encargue de las animaciones. Si sigues este camino, podrás escuchar los 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 fueron compatibles con el evento desde hace algún tiempo.

El JavaScript necesario para escuchar 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 de las animaciones individuales, las duraciones y las iteraciones.

Nota: Si es la primera vez que utilizas animaciones, los fotogramas clave son un término antiguo de las animaciones dibujadas a mano. Los animadores creaban fotogramas específicos para una parte de la acción, llamados fotogramas clave, que capturaban elementos como la parte más extrema de un movimiento y, luego, dibujaban todos los fotogramas individuales entre los fotogramas clave. En la actualidad, tenemos un proceso similar con las animaciones de CSS, en el que le indicamos al navegador qué valores deben tener las propiedades de CSS en determinados puntos y, luego, se completan los espacios vacíos.

Por ejemplo, puedes animar el cuadro del mismo modo que con las transiciones, pero hazlo sin interacciones 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 prefijos del CSS que necesites, lo que te permitirá escribir la versión sin prefijo en tus archivos de origen.

Cómo animar 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 desarrolladores mucho más poder. Puedes usar la API de Web Animations para animar propiedades específicas de CSS o compilar objetos de efectos componibles.

Las animaciones de JavaScript son imperativas, a medida que las escribes intercaladas como parte de tu código. También puedes encapsularlas dentro de otros objetos. A continuación, se muestra el código JavaScript que debes escribir para recrear la transición de CSS descrita 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 quieres que tu objeto permanezca en la ubicación a la que se movió, entonces debes modificar los estilos subyacentes cuando finalice la animación, según 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, se ofrece un polyfill.

Con las animaciones de JavaScript, puedes controlar totalmente los estilos de los elementos 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.