Crea fáciles animaciones CSS3 con Animate.css

Índice

¿Como crear animaciones CSS3?

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:

<!--Implementar Librería CSS animate.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

Sintaxis de uso

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

<h1 class="animated infinite bounceIn">Animate.css</h1>

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:

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <title>Animate.css</title>
 <meta name="description" content="Tutorial sobre el uso de la librería CSS animate.css">
 <!--Librería CSS animate.css-->
 <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
 <!--Animación gracias a las clases que contiene la librería-->
 <h1 class="animated bounceIn">Animate.css</h1>

</body>
</html>

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?

AJ Morales

Consultor de Marketing Digital, especializado en Marketing de Contenidos y Posicionamiento SEO 🚀. Me considero un apasionado de la tecnología y de la edición profesional de fotografías con Adobe Photoshop. Málaga ciudad con alma.