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