Gracias a la librería Animate.css aprenderemos a crear sencilla y prácticas animaciones CSS3. Ahorraremos mucho tiempo a la hora de crear y desarrollar nuestras animaciones. ¡Comencemos!

¿Como crear animaciones CSS3?

En primer lugar debemos de agregar el archivo CSS de la librería animate.css a nuestro proyecto.

Para ello deberemos de teclear el siguiente código:

Sintaxis de uso

Para crear nuestras animaciones css3 deberemos de manejarnos con la sintaxis básica de la librería.

En este ejemplo vemos como realizar una animación del tipo bounceIN que consiste en una especie de rebote.

Para realizar la animación debemos agregar algunos valores en la propiedad “class” como los siguientes:

  • animated: Para identificar el elemento a animar.
  • infinite: Es opcional y nos permite crear un bucle infinito a nuestra animación.
  • animación (Ej. bounceIN): Este es el nombre de la animación que he usado en el ejemplo. Existen multitud de ellas, así que !pruébalas!

Código Html

Para finalizar os dejo el código completo de nuestra animación:

Si queréis conocer todas las animaciones css3 de esta estupenda librería os dejo el enlace.

Conclusión

Existen varias formas de realizar animaciones css3. Ésta es una de las más rápidas y sencillas, y sin duda os sacarán de más de un apuro, a la vez que ahorraréis tiempo.

¿Os ha resultado útil?

 

Calificación de Lectores
[Total: 3 Media: 3.7]

1 thought on “Crea fáciles animaciones CSS3 con Animate.css

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Usamos cookies para personalizar su experiencia. Si sigue navegando estará aceptando su uso. Más Información | Cerrar