JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <a href="#intro" id="home">CLICK HERE</a>

<section id="intro" style="position: relative; top:800px">
<div class="row">

<div class="col-xs-12 col-sm-4 col-lg-2 animation-element slide-left">
 <div class="animation-element zoom-in"><i class="fa fa-eye fa-2x"></i></div>
 <h4><strong>ITEM1</strong></h4>
 <p>Description</p>
</div>

<div class="col-xs-12 col-sm-4 col-lg-2 animation-element slide-left">
 <div class="animation-element zoom-in"><i class="fa fa-plane fa-2x"></i></div>
 <h4><strong>ITEM2</strong></h4>
 <p>Description</p>
</div>

<div class="col-xs-12 col-sm-4 col-lg-2 animation-element slide-left">
 <div class="animation-element zoom-in"><i class="fa fa-facebook fa-2x"></i></div>
 <h4><strong>ITEM3</strong></h4>
 <p>Description</p>
</div>
<div class="col-xs-12 col-sm-4 col-lg-2 animation-element slide-left">
 <div class="animation-element zoom-in"><i class="fa fa-eye fa-2x"></i></div>
 <h4><strong>ITEM1</strong></h4>
 <p>Description</p>
</div>

<div class="col-xs-12 col-sm-4 col-lg-2 animation-element slide-left">
 <div class="animation-element zoom-in"><i class="fa fa-plane fa-2x"></i></div>
 <h4><strong>ITEM2</strong></h4>
 <p>Description</p>
</div>

<div class="col-xs-12 col-sm-4 col-lg-2 animation-element slide-left">
 <div class="animation-element zoom-in"><i class="fa fa-facebook fa-2x"></i></div>
 <h4><strong>ITEM3</strong></h4>
 <p>Description</p>
</div>
<div class="col-xs-12 col-sm-4 col-lg-2 animation-element slide-left">
 <div class="animation-element zoom-in"><i class="fa fa-eye fa-2x"></i></div>
 <h4><strong>ITEM1</strong></h4>
 <p>Description</p>
</div>

<div class="col-xs-12 col-sm-4 col-lg-2 animation-element slide-left">
 <div...

CSS

.slide-left {
	width: 150px;
}
@keyframes FadeIn { 

  0% {opacity:0; transform:scale(.1);}
  85% {opacity:1; transform:scale(1.05);}
  100% {transform:scale(1); }
}


.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  transition: all 800ms linear;
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  transform: translate3d(50px, 0px, 0px);
}

.animation-element.zoom-in {
  opacity: 0;
  transition: all 800ms linear;
  transition-delay: 1s;
  transform:scale(0.0)
}

.animation-element.zoom-in.in-view {
  opacity: 1;
  transform:scale(1.0)
  position: relative;
  animation: FadeIn 1.75s infinite alternate running;
}
.paused {
  animation-play-state: paused !important;
}

JavaScript

var $animation_elements = $('.animation-element');
var $window = $(window);

const MULTIPLIER = 300; //millis
var countInView = 0; 
var timeouts = [];
for (i = 0; i < $animation_elements.length; i++)  
    timeouts[i] = [];


function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height + 15);

  for(var i=0; i < $animation_elements.length ; i++) {
    var $element = $animation_elements.eq(i);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    
    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {


      // If is icon and it wasn't already in view range(in-view).
      if($element.is($('i').parent()) && !$element.hasClass('in-view')) {
        var delay = MULTIPLIER * ++countInView; //adds +1
      
        //Pause animation.
        $element.addClass('paused');
        // Clojure for passing outer values to timeout
        (function(delay, $element, savedtimeout){
          // Keeps a reference of the timeout to remove it later.
          savedtimeout[i][0] = setTimeout(function() {
            //Start animation
            $element.removeClass('paused');
            countInView--;
          }, delay);
        }(delay, $element, timeouts));
      }
      $element.addClass('in-view'); //always
    } else {

      // If element wasn't already in view range(in-view).
      if($element.hasClass('in-view')) {
        $element.removeClass('in-view');
      }
      if($element.hasClass('paused')) {
        if(timeouts[i][0] != null) {
          //Removes the timeout from the queue
          clearTimeout(timeouts[i][0]);
          countInView--;
        }

       ...