<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__delay-500ms">animate__delay-500ms</p>
    <p class="animate__animated animate__bounce animate__delay-1s">animate__delay-1s</p>
    <p class="animate__animated animate__bounce animate__delay-2s">animate__delay-2s</p>
    <p class="animate__animated animate__bounce animate__delay-3s">animate__delay-3s</p>
    <p class="animate__animated animate__bounce animate__delay-4s">animate__delay-4s</p>
    <p class="animate__animated animate__bounce animate__delay-5s">animate__delay-5s</p>
  </div>
  <p id="time"></p>
</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;
}

.animate__delay-500ms{
  animation-delay: 500ms;
}
let counter = 0;

function updateCounter() {
  const counterElement = document.querySelector('#time');
  counter += 25;

  if (counter <= 5000) {
    counterElement.textContent = counter;
  } else if(counter === 5000){
    clearInterval(intervalId);
  }
}

const intervalId = setInterval(updateCounter, 25);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.