Librería de animaciones

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: