<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<body>
  <div>
    <p class="animate__animated animate__bounce animate__fast">animate__fast</p>
    <p class="animate__animated animate__bounce animate__faster">animate__faster</p>
    <p class="animate__animated animate__bounce">normal</p>
    <p class="animate__animated animate__bounce animate__slow">animate__slow</p>
    <p class="animate__animated animate__bounce animate__slower">animate__slower</p>
  </div>
</body>
*{
  padding: 0;
  margin: 0;
}

body{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.