Utilizando Animate.css para dar dinamismo a nuestro contenido

¿Necesitas animar algún recurso de tu web? Añade en pocos pasos animaciones CSS3 a cualquier elemento con esta sencilla librería

En la creación de cualquier contenido web puede resultarnos interesante incorporar animaciones que nos ayuden a mejorar la experiencia del usuario durante la interacción con el contenido. En esta entrada hablaremos de animate.css, una pequeña librería que nos ayudará a disponer de un gran número de animaciones CSS3 en pocos pasos.

¿Por qué animaciones CSS3?

En primer lugar, es importante justificar el uso de animaciones CSS3. En la actualidad es común el uso de efectos jQuery con funciones tan sencillas como .fadeIn() o slideUp(). A grandes rasgos, el principal problema de estos efectos es que no están acelerados por GPU, lo cual puede provocar pequeños retardos en la ejecución de la animación y, por lo tanto, afectar negativamente la experiencia del usuario.

Por el contrario, las animaciones CSS3 pueden ser aceleradas por GPU, lo que se traduce en una mejora del rendimiento. Aun así, hay que tener en cuenta que no todos los navegadores son compatibles con las animaciones CSS3. Para tener más información sobre este tema, recomiendo la lectura del artículo “Myth busting CSS animations vs Javascript” (en inglés), donde se explican de forma detallada las diferencias, ventajas e inconvenientes entre el uso de animaciones por Javascript vs CSS3.

Añadiendo la librería a nuestro documento

La librería animate.css no es más que un archivo .css con un conjunto de clases donde cada una de ellas tiene definida un tipo de animación. Para utilizar la librería, añadimos el siguiente enlace en la cabecera (head) de nuestro documento html. Podemos descargarnos la librería de GitHub o podemos utilizar la versión alojada en SmallCDN.

<link rel=”stylesheet” href=”http://s.mlcdn.co/animate.css">

Animando elementos

Para la animación de los elementos, utilizaremos la función .addClass() de jQuery. En GitHub podemos ver también todas las animaciones de las que dispone la librería.

Una vez escogida la animación, el siguiente paso es añadir la clase pertinente al elemento que deseemos. Para ello, desde jQuery realizamos la siguiente operación:

$(‘#mielemento’).addClass(‘animated [nombre de la animación]’);

Deberemos substituir [nombre de la animación] por el nombre de la animación que deseemos sin los corchetes. Por ejemplo:

$(‘#mielemento’).addClass(‘animated flash’);

Controlando la ejecución de las animaciones

Por otro lado, nos puede resultar interesante detectar el momento en que las animaciones finalizan para, por ejemplo, lanzar otra animación y evitar que se solapen entre ellas.

Para ello, declararemos la siguiente variable con la que detectaremos el momento en el que las animaciones finalizan:

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

Y detectamos el momento en el que finaliza la animación para eliminar la clase de la animación que hemos añadido anteriormente:

$('#mielemento').addClass(‘animated flash’).one(animationEnd, function() {
$(this).removeClass('animated flash‘);
});

Para poder observar el funcionamiento de estas animaciones, dejo un pequeño ejemplo donde se utilizan un par de animaciones anidadas.

Conclusión

Podemos ver como, en pocos pasos, dispondremos de una gran variedad de animaciones CSS3 sin necesidad de crearlas nosotros mismos.

Además, añadir este tipo de animaciones nos ayudará a mejorar la experiencia del usuario y a conseguir que el contenido sea más atractivo y dinámico.

Por lo tanto, si necesitamos animar algunos elementos de nuestra web y no queremos complicaciones, animate.css nos puede servir de gran ayuda.