Crea Animaciones Facilmente En CSS3 Con Animate.Css

CSS ha mejorado muchas de sus características para hacer que el desarrollo web sea mucho más interesante. Una de estas características es efectos de animación que ofrece el CSS3. Antes de existir el CSS3 era necesario el uso de flash ó de una gran cantidad de lineas de código en javascript.

Anteriormente habíamos compartido una guía de como crear transiciones en CSS3, en el presente post compartiremos con ustedes una impresionante biblioteca que hará aun mas fácil la creación de animaciones con CSS3, la responsable de esto es Animate.css.

animate css css3

Animate.css es una librería lista para el uso de los efectos de animación de CSS3. Esta biblioteca suministra más de 50 efectos de animación diferentes, que trabajan constantemente en la mayoría de los navegadores con soporte para CSS3.

Puede aplicar la animación en algún texto, imagen, formulario, etc. También hay muchos grandes sitios que utilizan este librería, uno de ellos es Tridiv.com, el cual maneja animación en 3D usando solo CSS3.

Primeros Pasos Con Animate.css

Al igual de que se tratara de algún otro archivo css ó javascript, lo único que tenemos que hacer es incluir en el head los archivos necesarios para la animación. Puedes descargar la biblioteca completa en la página del repositorio Github.

Por defecto, Animate.css animará solamente una vez en la primera carga de la página. A continuación, permanecer estática. Para poder controlar la animación, vamos a necesitar un poco de Javascript. En este caso, vamos a incluir un archivo jQuery en el proyecto.

[code lang=»html»]

[/code]

Etiquetas En HTML

Para aplicar la animación se debe de agregar la clase .animated al elemento que desea animar, junto con el nombre de la animación.

[code lang=»html»]

<div class="option animated wobble">Este texto será animado.</div>

[/code]

Eso es todo! La animación sólo se llevará a cabo solo una vez, por lo que también puede ser necesario utilizar Javascript para aplicar la animación en algún evento en especifico.

Opciones Adicionales CSS

Esta librería es altamente personalizable, si deseamos tener mas opciones en las animaciones solo debemos agregarlas en la clase .option. Como ya se ha mencionado antes, por defecto se ejecutara solo una vez la animación, una vez este cargada la pagina, pero si queremos que tenga un retraso para la animacion, o que se ejecute varias veces (loop)?

Debemos de tener en cuenta los prefijos que hay para los diversos navegadores, y con esto evitar problemas de compatibilidad, un ejemplo sobre la personalización por medio de la clase .option es la siguiente:

[code lang=»html»]

.option {
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 5;
}

[/code]

Controlar La Animación Con JavaScript

Para un mayor control sobre el estado de las animaciones, necesitamos un poco de ayuda de nuestro amigo Javascript. Digamos que queremos un enlace de texto para activar una animación en un clic. En primer lugar, tenemos que añadir la referencia en el enlace, así.

[code lang=»html»]

<div class="demo animated">
<p>This text will animate. <a href="" id="ref">Click to animate!</a>
</p>
</div>

[/code]

Para utilizar la función de clic, incluido en el vinculo referenciado. Con Javascript, puedes definir el nombre de la animación. Vamos a utilizar un enfoque mediante la creación de la función animate, y nombrando la animación junto con la clase de elemento (en el código anterior, hemos añadido el atributo demo).

Y el código Javascript sera de la siguiente forma:

[code lang=»javascript»]

function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
</script>

[/code]

Como podemos ver, el uso de esta libreria es sencilla, solo debemos de saber un poco de CSS3 y un poquito de Javascript para expandir las posibilidades de crear una animación bastante elegante para nuestra web. Esperamos que esta guía haya sido de gran utilidad.