/ CSS

Animate.css Excelente librería CSS Para Crear Animaciones

Muchas veces empleamos bastante tiempo para desarrollar o crear animaciones con CSS, pero para acelerar el trabajo existe la librería CSS que tiene por nombre animate.css, esta potente librería viene con un pack de clases con efectos incluidos el cual te enseñare como implementarlo en un proyecto.

Página web & Repositorio GitHub

animate.css


animate.css

Implementación de animate.css

Primero agregamos el archivo CSS de la librería animate.css a nuestro proyecto.

<!--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

<h1 class="animated infinite bounceIn">Animate.css</h1>
  • animated: nombre de la clase principal siempre debe de estar incluida.
  • infinite: nombre de la clase que se encarga de repetir el efecto infinitamente, la inclusión de esta clase es opcional.
  • bounceIn: nombre de la clase que puede variar según el efecto deseado.

Código HTML

<!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>

Una vez que tenemos clara la forma de su uso implementarlo en nuestro proyecto sera fácil.

Demos

Ejemplos animate.css

Luis Rene Mas Mas

Luis Rene Mas Mas

Hola, soy desarrollador Frontend, me encanta las tecnologías web, mi pasatiempo favorito es administrar este blog.

Leer Más