Originalmente Flash nos pavimentó el camino a la hora de diseñar sitios web con elementos más allá del texto o imágenes. Permitió a los desarrolladores incluir animaciones y otros ricos efectos, guiándonos hacia una experiencia de usuario más colorida y variada. Sin embargo, Flash era una tecnología propietaria, que realmente tambaleó la web, un medio donde los estándares abiertos deberían tener la palabra, más allá de estar plagado de fallos, como los problemas de seguridad, largos tiempos de carga en redes mediocres, etc.

Afortunadamente vinieron las librerías JavaScript como jQuery, Prototype y MooTools, las cuales desplazaron muchos de los problemas de Flash, implementando toda una nueva gama de funcionalidades basadas en lenguajes estándar. Una de las ventajas de jQuery es hacer más sencillo para el desarrollador medio usar Javascript a la hora de crear efectos y animaciones, ya que nos ofrece una única interfaz para el trabajo y la propia libería se encargaba de ejecutar el código necesario para que la funcionalidad se ejecutase correctamente en cualquier navegador del mercado.

Han pasado ya unos cuantos años desde que jQuery fue el rey del frontend. Actualmente es dudosa la necesidad de utilizarlo, ya que existe un fuerte compromiso por los estándares en los navegadores, pero también porque tenemos con nosotros nuevas características en lenguajes como el propio Javascript o CSS para llegar mucho más lejos sin necesidad de otros añadidos. Por lo que respecta a CSS3 y al tema que nos atañe en este artículo, ahora tenemos toda una cantidad de estilos que nos permiten crear animaciones, las cuales ofrecen ventajas adicionales, como el incremento potencial de velocidad, debido a que son renderizadas directamente por el navegador.

Pero, ¿cuál es realmente la mejor solución para nosotros a la hora de usar animaciones? En este artículo echaremos un vistazo a cómo se crean las animaciones en jQuery y en CSS3, prestando especial atención al desempeño de cada una de estas tecnologías.

Introducción a la animación en jQuery

La librería jQuery reduce mucho la complejidad para el desarrollador. Por ejemplo, aquí tenemos un caso en el que crearemos un simple <div>, el cual será animado posteriormente al hacer clic en un botón:

1. Incluimos la librería jQuery en la página, por ejemplo así:

// Se recomienda que uses un CDN para invocar la librería jQuery. Aquí hay un enlace al CDN de Google:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js?ver=1.8.1"></script>

2. Creamos el elemento <div>, y le damos un estilo básico:

<div></div>

div {
    margin-left:10px;
    margin-bottom:10px;
    background-color:red;
    opacity:1;
    float:left;
    width:100px;
    height:1px;
}

3. Creamos el botón que al ser pulsado accionará la función que anime el <div>

<button id="inicio">Comenzar Animación</button>

4. Escribimos un poco de código jQuery para seleccionar el elemento <div> y aplicamos los efectos una vez que el botón haya sido accionado. Una vez hecho, la altura del <div> se incrementará a 25px y la opacidad se reducirá de 1 a 0.5 en un periodo de 2.000 milisegundos (2 segundos) :

$("#inicio").click(function(){
    $("div").animate({
        opacity: 0.5,
        height:"25px",
    } , 2000);
});

Es muy bonito ver lo fácil que es animar un elemento con jQuery usando nada más que unas pocas líneas de código, y lo mejor sobre jQuery es que tu código funcionará igual de bien en todos los navegadores, ¡incluyendo versiones tan vetustas como IE6!

Introducción a la animación en CSS3

Para crear una animación en CSS3 necesitamos especificar dos diferentes construcciones en nuestro CSS. Antes que nada, necesitamos especificar qué forma tomará la animación usando la regla @keyframes, la cual se asemeja a ésto:

@keyframes mi-animacion {
    0% {height:0px; opacity:1; }
    100% {height:25px; opacity:0.5; }
}

"mi-animacion" es el nombre por el cual nuestra animación será identificada, y las líneas diferentes son diferentes keyframes (fotogramas clave). En cada caso, las propiedades que hay entre llaves indican las propiedades de animación que se tendrán en cuenta en cada fase de ésta, y los porcentajes dictan la duración de cada fase.

Para aplicar la animación a un elemento de la página necesitas referirla a éste usando la propiedad "animation":

div {
    margin-left:10px;
    margin-bottom:10px;
    background-color:red;
    opacity:0.5;
    float:left;
    width:100px;
    height:25px;
    animation: mi-animacion 2s;
}

Es funcionalmente idéntico al ejemplo que hemos visto antes de jQuery: el <div> se anima en un periodo de 2 segundos, con su altura incrementándose a 25px y su opacidad reduciéndose de 1 a 0.5. Suena sencillo, ¿eh? Desafortunadamente, el soporte de los navegadores no es tan bueno en el caso de las animaciones CSS3.

@-o-keyframes mi-animacion {<br />
        0%   {height:0px; opacity:1; }<br />
        100% {height:25px; opacity:0.5; }<br />
      }
      

div {
        /* otros estilos... */
        -o-animation: mi-animacion 2s;
    }
    

Herramientas para evitar prefijos

Si tener que desarrollar con esos prefijos te complica la vida demasiado yquieres es reducir todas las líneas de prefijos a una sola, puedes usar la solución del preprocesador. Aquí hay un par de ellos:

1. SASS: Un procesador CSS que te permite incluir variables, funciones y otras características logrando que tu CSS sea más rápido y eficiente en algunos casos. Usar SASS no debería afectar al rendimiento de tu sitio.
2. Prefixfree: Una librería JavaScript que simplemente añade los prefijos correctos a tu CSS cuando el navegador accede a él, en tiempo de ejecución. Esto significa la ejecución de más JavaScript en la máquina del cliente, lo cual podría añadir un poco de carga en el rendimiento, pero relativamente pequeño. La pega es que el diseño de la web se quedará a cuadros si el usuario tiene desactivado Javascript.

Por el tema de los prefijos y el antiguo soporte a las animaciones CSS, podría parecer que jQuery es el camino a seguir, especialmente en términos de compatibilidad de navegadores. Aunque, repetimos, esto es algo del pasado, ya que actualmente está todo muy estable!!!

Si quieres un sitio que permanezca usable en los viejos navegadores que no soportan la animación, es aconsejable que el ajuste por defecto de las propiedades que son animadas se indiquen en el estado final de la animación. Por ejemplo recuerda que hemos ajustado la altura a 25px y la opacidad a 0.5, así que si la animación no está disponible el navegador ajusta los valores por defecto a los del estado final, es decir, que en un navegador antiguo los valores que se verían serían los de 25px y 0.5, no los iniciales.

Guerra de animaciones: CSS3 vs jQuery

Para testar el rendimiento de las animaciones CSS3 frente a las animaciones jQuery, probemos la siguiente prueba. Usaremos el código que hemos enseñado arriba, pero en cada caso animaremos 300 <div>s simultáneamente. Así será fácil medir el tiempo que le lleva a cada animación el ser ejecutada.

Animaciones CSS3

(Leyenda Imagen 1: el tiempo que lleva animar 300 div con animación CSS).

Como se puede ver en la imagen, la animación se completa en unos 2.9 segundos.

Vamos a analizar ahora el uso de memoria. Este gráfico fue creado usando la opción de Memoria dentro de la pestaña Timeline en las Herramientas de Desarrollador de Chrome 21.

(Leyenda Imagen 2: la memoria usada al animar con animación CSS.

La memoria usada durante la animación CSS3 es muy pequeña -alrededor de 1.5MB, con solo 100 acciones requeridas. Los datos finales del test son:

• Número de acciones realizadas para acabar la animación: 100
• Tiempo tomado en ejecutar la animación: 2.9 segundos
• Memoria consumida al final de la animación: 1.5 MB

Ahora vamos a proceder realizando el mismo experimento con animaciones jQuery.

Animaciones jQuery

El gráfico de ejecución para el test de animación jQuery sale en la Imagen 3. El gráfico fue creado usando la herramientas de Opera Dragonfly, y el navegador usado fue Opera 12 en Mac OS X.

(Leyenda Imagen 3: El tiempo que tardan en animarse 300 <div>s con jQuery).

La operación completa lleva unos 5 segundos ¿demasiado tiempo? La animación actual no lleva demasiado tiempo, pero tiene un tiempo extra con respecto a la animación cargada con JavaScript (nótese también que hay una pequeña fracción de tiempo entre que el botón se pulsa y la animación comienza, efectivamente, a proceder). También el número de acciones realizadas por el navegador es mayor, siendo más de 2.000, enorme cifra comparada con las únicamente 100 en la misma animación hecha con CSS3.

Incluso sin usar herramientas de desarrollo, notarás que una vez que el botón "Empezar Animación" es pulsado, hay un breve intervalo de tiempo antes de que la animación comience.

En cuanto al uso de memoria, fijémonos en la Imagen 4. El gráfico fue generado usando la misma opción de Memoria de las Herramientas de Desarrollo de Chrome 21 que en el caso anterior.

(Leyenda Imagen 4: La memoria usada con jQuery).

Cuando se trata de memoria, la animación muestra un hambre brutal, devorando cerca de ¡6 MB! Los datos finales del test son:

• Número de acciones realizadas para ejecutar la animación: 2119
• Tiempo que tarda la animación en finalizar: 5 segundos
• Memoria consumida al final de la animación: 6 MB

Y el ganador es... CSS!

¡CSS3! Claramente gana CSS3 a mucha distancia. La gigantesca diferencia en rendimiento es debida a que el procesador de CSS del navegador está escrito en C++ y además tiene la posibilidad de usar el procesador de gráficos del ordenador (GPU). El código nativo CSS se ejecuta muy rápido, mientras que si pasamos por jQuery (dejando la responsabilidad a JavaScript) vemos que las capacidades son mucho menores, no solo porque sea un lenguaje interpretado, sino porque además el navegador no puede predecir por adelantado su comportamiento ni tiene procesos de optimización para el código que podría llegar a escribirse.

A la vista de estos resultados, claramente se entiende la necesidad de usar animaciones CSS3, deberías tener en cuenta las ventajas y desventajas que hemos discutido anteriormente en el artículo. Hoy no existe un motivo para priorizar la compatibilidad de navegadores, ya que nadie usa Internet Explorer 7 y 8.

Nótese que para animaciones simples, como la trivial mostrada en el ejemplo del test, probablemente podrías usar menos CSS si lo hicieras como transiciones CSS en vez de como animación. Ya depende de la particular situación que vivas. Las transiciones son más rápidas pero dependen de los cambios de estado, mientras que las animaciones son más flexibles y poderosas. Elije la opción que más te convenga.

Este texto es una traducción actualizada del artículo de Siddharth Rao sobre animaciones CSS y animaciones jQuery.