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!
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">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:
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.
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?
Todos hemos estado allí: tienes 20 pestañas abiertas, cinco PDFs y tres hojas de cálculo,…
Si ya estás usando Google Nano Banana, sabes que es la herramienta que está redefiniendo…
¿Te ha pasado? Estás en plena conversación con Gemini, fluyendo con ideas, y de repente……
¿Alguna vez soñaste con ser una de esas figuras coleccionables que tanto te fascinaban de…
Imagina caminar por las calles iluminadas de París al atardecer, con la Torre Eiffel brillando…
¿Imaginas crear aplicaciones inteligentes que resuelvan tus problemas cotidianos sin escribir una sola línea de…
Esta página utiliza cookies para mejorar su rendimiento
Ver comentarios