10 herramientas para animaciones en CSS3 que deberías estar usando ya

CSS3 ha introducido una nueva sintaxis para animaciones que puede ayudarte a lograr ciertas cosas muy interesantes en tus diseños. La construcción de animaciones desde cero puede ser complicada y requiere de mucho tiempo, sin embargo, las librerías con animaciones y las herramientas para la animación pueden ser muy pero que muy útiles. En este artículo vamos a echar un vistazo a 10 herramientas brillantes que pueden hacer que el crear tus propias animaciones sea una tarea muy rápida y sencilla.

CSS3Gen CSS3 Animation Generator

CSS3Gen te proporciona un generador de animaciones muy sencillo de utilizar que te permite crear animaciones básicas rápidamente. Ten más que claro que con esta herramienta no vas a crear obras de arte complicadas, pero es una gran opción si deseas crear una animación estándar sin montar mucho alboroto.

No tienes que ensuciarte las manos con código. Puedes establecer las propiedades a través de un formulario, previsualizar el resultado y simplemente copiar y pegar el código en tu propio archivo CSS.

CSS Animate

Si necesitas animaciones más complejas, puede encontrar CSS Animate más útil. Cuenta con una interfaz de usuario más compleja, en la que se pueden establecer muchas más propiedades. Puedes seguir, detener y reiniciar la animación con la ayuda de un timeline muy intuitivo.

También cuenta con animaciones base, como "Bounce", "Shake" y "Swing", que se pueden cargar en el generador, y modificar el código de acuerdo a tus necesidades.

Coveloping CSS Animation Generator

Coveloping CSS Animation Generator es probablemente la mejor opción si eres nuevo en esto de las animaciones de CSS3, y deseas comprender rápidamente cómo funcionan. Esta simple herramienta, pero poderosa, te permite probar los diferentes tipos de animaciones que CSS3 te puede ofrecer, y así, poder echar un vistazo, de un modo sencillo, a las diferencias entre ellos.

Sólo tienes que configurar 4 parámetros: el tipo de animación, la función de animación, la duración en segundos, y si la animación es infinita. Cuando esté lista, no olvides copiar el código HTML y CSS generado.

Magic Animations

Magic Animations es una librería de CSS que te permite insertar fácilmente animaciones con efectos especiales en tu sitio web. Por ejemplo, puedes hacer que los elementos se desvanezcan de dentro a fuera, que se abran de izquierda a derecha, que roten, que giren de arriba a abajo y de abajo a arriba, de izquierda o derecha, y muchas cosas más...

Todo lo que tienes que hacer es descargar el código, incluir el archivo CSS en tu página HTML, y añadir la clase apropiada con la ayuda de jQuery de la siguiente manera:

$('.yourdiv').hover(function () {
  $(this).addClass('magictime puffIn');
});

También puedes cambiar los ajustes del timer, y hacer que la animación sea infinita con la ayuda de jQuery (para más detalles echa un vistazo al archivo readme).

Animate.css

Animate.css te proporciona un set chulísimo de animaciones de CSS3 cross-browser. Las animaciones se dividen en grupos tales como Attention Seekers, Bouncing Entrances, Bouncing Exits, Fading entrances, y muchos otros, así que realmente no puedes quejarte de falta de variedad.

Puedes descargar el código desde Github. A continuación, sólo tienes que añadir el archivo CSS a tu página HTML, y las clases CSS pertinentes a los elementos HTML que deseas animar.

Bounce.js

Bounce.js es una librería de JavaScript muy útil que te brinda la posibilidad de crear animaciones complejas. Bounce.js tiene una interfaz de usuario genial que te permite agregar diferentes componentes - como duración, retardo y número de rebotes - manualmente a tu animación, o seleccionar un preset y listo. Entonces podemos reproducir la animación, y ajustar las propiedades si fuese necesario.

AniJS

AniJS es una librería de Javascript supermolona que te da la posibilidad de añadir animaciones CSS3 a tus diseños, para construir componentes para interfaces de usuario sofisticados como fichas animadas, acordeones, modales, menús deslizantes, notificaciones de aplicaciones móviles, desplazamientos, y muchos más.

Funciona con todos los navegadores modernos, incluyendo iOS y Android, y no necesita librerías de terceros. Cuenta con un showcase espectacular llamado AniCollection donde se puede experimentar fácilmente con los diferentes efectos proporcionados por la librería.

Single Element CSS Spinners

¿Alguna vez has querido mejorar tus diseños con animaciones para la carga de contenido? Si la respuesta es sí, esta librería puede ser una excelente opción para ti. El código CSS de los spinners está escrito en LESS. No requiere ninguna configuración, el código está listo para usarse, suficiente para insertarlo en tus propios archivos HTML y CSS.

Odometer

Odometer es una herramienta genial para colocar contadores animados en tu sitio. Es una librería CSS y JavaScript. La parte CSS está escrito en Sass, y puedes elegir entre distintos temas como "Digital", "Estación" y "Coche".

Para utilizar Odometer, tienes que agregar el archivo JavaScript y el archivo del tema seleccionado en tu página HTML. Después establecer la clase odometer (class="odometer") en el elemento que deseas convertir en un contador animado. Es una opción ideal para representar visualmente datos numéricos, o para hacer una página de "Próximamente" mucho más llamativa.

Snabbt.js

Snabbt.js es una librería para animaciones minimalistas que te ayuda a moverte con facilidad entre las cosas. Si necesitas un poco de inspiración, echa un vistazo a las demos para ver lo que se puede lograr con esta herramienta de animación. La tabla periódica de más abajo es sólo una de las muchas posibilidades que se pueden llegar a implementar con Snabbt.js.

Tienes que escribir un poco de JavaScript si deseas utilizar esta librería, pero el resultado es bastante espectacular, te lo aseguramos.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
HAY 1 COMENTARIOS
  • Sin Nombre dijo:

    Están muy bien estas herramientas , buena busqueda , gracias por el aporte

Conéctate o Regístrate para dejar tu comentario.