Crea Animaciones Facilmente En CSS3 Con Animate.Css
Tiempo estimado de lectura 4 minutos

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.


<head>
...
<link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
...
</head>

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.


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

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:


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

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í.


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

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:


<script language="javascript">
 $(function() {
$("#ref").click(function() {
         animate(".demo", 'bounce');
         return false;
    });
 });

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

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.

Este post tiene 3 comentarios

  1. Brian

    Buen Post! Tengo una inquietud, la animacion funciona a la perfeccion pero me gustaria saber como se podria cambiar el punto de anclaje en mi caso de una imagen ya que el punto de anclaje de la animacion no esta centrado!
    Gracias.

  2. Daniel Reyes

    Disculpen tengo un pequeño problema , cuando ingreso la libreria y empiezo a usar las clases todo va bien si realiza las animaciones, pero tiene un pequeño detalle, cada vez que estas se realizan aparecen momentaneamente cuadros negros, sabrian como solucionar eso? es decir que dejen de parecer esos cuadros negros a la hora de ejecutal la animacion, o porque sucede eso ? , de antemano gracias por su tiempo y respuesta

Deja un comentario