JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="row IconAnimate">
   
   <div class="col-xs-12 col-sm-4 col-lg-2">
     <div><i class="fa fa-trademark fa-3x"></i>
       <h4><strong>TITLE 1</h4>
       <p>BLA BLA BLA</p>
    </div>
   </div>
                   
   <div class="col-xs-12 col-sm-4 col-lg-2">
    <div><i class="fa fa-paint-brush fa-3x"></i> 
      <h4><strong>TITLE 2</strong></h4>
      <p>BLA BLA BLA</p>
    </div>
   </div>  

</div>

CSS

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

.IconAnimate i { animation: FadeIn 1s linear; animation-fill-mode:both; }
.IconAnimate i:nth-child(1){ animation-delay: 3s }
.IconAnimate i:nth-child(2){ animation-delay: 6s }
.IconAnimate i:nth-child(3){ animation-delay: 9s }
.IconAnimate i:nth-child(4){ animation-delay: 12s }