Animate.css: Librería cross-browser de animaciones CSS

🍿 Muy fácil de usar, cross-browser, es decir que es compatible con la mayoría de los navegadores.

En serio, es muy fácil de usar, con tan solo agregarle una serie de clases css a los elementos html ya está, se mueven.

En el sitio web pueden probar las opciones que trae:
https://daneden.github.io/animate.css/

Entonces, tenemos un título que queremos que aparezca simpáticamente rebotando:

<h1 class="animated bounce">Titulo</h1>

Así como lo escribimos ya estamos, se va animar. Por aquí el listado con todas las animaciones en una tabla:
https://github.com/daneden/animate.css

En este último link pueden fijarse que hay mas opciones, como hacer que se animen algunos segundos después de cargarse o que se repita constantemente, con tan sólo agregar más clases al estilo de «infinite delay-2s».

También pueden agregarle una clase personalizada para cambiar los tiempos:

.tuElemento {
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
}

No son combinables entre sí, reacciona a una sola animación por vez, en algún que otro proyecto las combiné con las animaciones de la librería de jQuery y funcionaron perfecto, agregando y quitando las clases luego de que termine cada animación, lo veremos en otro posteo sobre jQuery.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *