JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">

JavaScript

$(function() {
  $.fn.extend({
    animateCss: function(animationName) {
      var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
      this.addClass('animated ' + animationName).on(animationEnd, function() {
        $(this).removeClass('animated ' + animationName);
      });
    }
  });


  var stepDelay = .5;
  var blocksLength = 15;
  var extraSteps = 4;

  $(document).ready(function() {

    for (var i = 1; i <= blocksLength; i++) {
      var block = $('<div class="show show' + i + '">Show ' + i + '</div>');
      $('body').append(block);
      block.css('animation-delay', (i * stepDelay) + 's');
    }
    animateIt();

  });

  var u = setInterval(function() {
    animateIt();
  }, stepDelay * (blocksLength+extraSteps) * 1000);
});

function animateIt() {
	$('.show').removeClass('fadeIn animated').animateCss('fadeIn');
}