JSFiddle - React, Tailwind, and code Playground

by Jason Liang

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">
   <div class="IconAnimate col-xs-12 col-sm-4 col-lg-2">
     <div><i class="fa fa-trademark fa-3x"></i>
     <h4><strong>TITLE 1</strong></h4>
       <p>BLA BLA BLA</p>
    </div>
   </div>
                   
   <div class="IconAnimate 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:nth-child(1) i { animation-delay: 1s }
.IconAnimate:nth-child(2) i { animation-delay: 2s }
.IconAnimate:nth-child(3) i { animation-delay: 3s }
.IconAnimate:nth-child(4) i { animation-delay: 4s }