Aquí aprenderemos añadir la biblioteca animate.css a los documentos html y tener una gran variedad de animaciones hechas por otras personas donde solo tenemos que poner la clase que queramos.
Lo primero, para podemos instalarlo con npm mediante el comando:
$ npm install animate.css --save Otra opción es con yarn:
$ yarn add animate.css O la opción que voy a usar y la más recomendable añadiendo el siguiente link en el <head> del html:
<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/></head>
Después para usarlo simplemente hay que poner dos clases.
La clase animate__animated y la clase de la animación.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio 22</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<style>
body{
text-align: center;
}
h1{
padding: 0;
margin: 0;
}
.animate__bounce {
background-color: rgba(255, 34, 34, 0.726);
}
.animate__flash {
background-color: rgba(255, 252, 80, 0.904);
}
.animate__swing {
background-color: rgb(122, 253, 89);
}
.animate__backInDown {
background-color: rgb(13, 255, 154);
}
.animate__flip {
background-color: rgb(0, 217, 255);
}
.animate__lightSpeedInRight {
background-color: rgb(0, 38, 255);
}
.animate__rollIn {
background-color: rgb(153, 0, 255);
}
</style>
</head>
<body>
<h1 class="animate__animated animate__bounce">Rebotar</h1>
<h1 class="animate__animated animate__flash">Flash</h1>
<h1 class="animate__animated animate__swing">Balancearse</h1>
<h1 class="animate__animated animate__backInDown">Se cae</h1>
<h1 class="animate__animated animate__flip">Flip</h1>
<h1 class="animate__animated animate__lightSpeedInRight">Derecha</h1>
<h1 class="animate__animated animate__rollIn">Izquierda</h1>
</body>
</html>Lo único necesario son las clases, el resto son colorines que he puesto para que sea más visual.
Quedaría de la siguiente manera:
