Animate.css librería para animaciones CSS

  • Por
Te presentamos animate.css librería CSS para animaciones ya listas para usar, con efectos diversos.
28/03/2014 -

Este proyecto es bastante interesante para los que quieren usar animaciones CSS, sin que tengas que preocuparte por cómo expresarlas en código CSS3. Básicamente es un conjunto de animaciones con diversas formas que puedes copiar y pegar para incorporar en tu sitio.

Se llama Animate.css y si eres impaciente lo puedes ver en http://daneden.github.io/animate.css/

¿Qué es lo que encuentras? Pues en la home del proyecto, minimalista hasta la médula, encuentras un select con varios tipos de animaciones y un botón para animar, es decir, ejecutar una animación. Dicho en pocas palabras, es un demo de cómo se verían los distintos tipos de animaciones que te incorpora la librería.

Luego, desde la home puedes acceder al CSS completo de las animaciones y a la página de Github del proyecto.

¿Puedes explicar mejor qué es este proyecto de animación CSS3? la verdad es que si entras en la home te quedas un poco confuso sobre qué es esto. Pero básicamente es una colección de animaciones atractivas y algunas bastante espectaculares, compatibles con la mayoría de los navegadores y basadas en CSS3. Las puedes usar para todo lo que desees, efectos en una web, sliders, transiciones, etc.

Para usar este proyecto puedes incorporar la hoja de estilos con las animaciones, tal como incluyes cualquier CSS en un documento HTML (aunque sería más recomendable copiar en tu propio archivo de estilos CSS solamente aquellas animaciones que vas a usar realmente en el proyecto). Luego puedes aplicar estas animaciones con tus reglas CSS o incluso usando librerías Javascript como jQuery las puedes agregar dinámicamente a los elementos que necesites.

En el Github del proyecto, que puedes encontrar en https://github.com/daneden/animate.css encontrarás instrucciones más detalladas, sobre cómo agregar animaciones o configurarlas. Incluso encontrarás una manera de hacer un paquete personalizado de aquellas animaciones que realmente te interesen para el proyecto.

Echarle un vistazo y tenerlo a mano para lo que pueda surgir. Seguro que algo de animación CSS le queda bien en tu proyecto, pero no te pases que no queremos volver a la web de la década de los 90 ;)