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">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>
</section>

CSS

@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: 3s;
  transform:scale(0.0)
}

.animation-element.zoom-in.in-view {
  opacity: 1;
  transform:scale(1.0)
  position: relative;
  animation: FadeIn 1.75s infinite ;
  animation-direction: alternate;
}

JavaScript

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

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);
 
  $.each($animation_elements, function() {
    var $element = $(this);
    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)) {
      $element.addClass('in-view');
    } else {
      $element.removeClass('in-view');
    }
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');