Comparación entre las animaciones de CSS y JavaScript

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

Existen dos formas principales de crear animaciones en la Web: con CSS y JavaScript. La elección de uno u otro dependerá en gran medida 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 activar o desactivar 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 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 difieren (consulta también Rendimiento de CSS en comparación con JavaScript). Cada uno tiene ventajas y desventajas, pero los siguientes son algunos lineamientos útiles:

  • Usa CSS cuando tengas 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 costado o mostrar una información sobre la herramienta. Es posible que termines usando JavaScript para controlar los estados, pero las animaciones en sí 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 y está disponible actualmente 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 toda una escena de forma manual. Este es un enfoque avanzado de JavaScript, pero puede resultar útil si compilas un juego o dibujas en un lienzo HTML.

De manera 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 en general seguir usando esa opción para tus animaciones.

Anima con CSS

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

A continuación, se muestra parte de la 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, existen opciones para la aceleración, que es básicamente 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 y desactivar cada animación:

box.classList.add('move');

Esto proporciona un buen equilibrio a tus apps. Puedes enfocarte en administrar el estado con JavaScript y simplemente configurar las clases adecuadas en los elementos de destino para 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 que fue compatible con estos eventos. Los demás navegadores son compatibles con el evento durante 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 las 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 una animación individual.

Por ejemplo, puedes animar el cuadro del mismo modo con las transiciones, pero puedes hacerlo sin que el usuario interactúe con 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

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 quieres 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 permite escribir la versión sin prefijo en tus archivos fuente.

Anima 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 de CSS específicas o crear objetos de efectos componibles.

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 código JavaScript que debes escribir para recrear 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ó, entonces debes modificar sus estilos subyacentes cuando haya finalizado 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. Hay un polyfill disponible en el caso de los navegadores modernos que no son compatibles.

Con las animaciones de JavaScript, tienes el control total de los estilos de los elementos en cada paso. Esto significa que puedes ralentizar las animaciones, pausarlas, detenerlas, invertirlas y manipular elementos como estimes conveniente. Esto resulta útil, en especial, si compilas aplicaciones complejas orientadas a objetos, ya que puedes encapsular de forma adecuada tu comportamiento.