JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js"></script>
<div class="junk_wrap">

<div class="chat-item ng-enter_l1 ng-enter-stagger list card">  
  <div class="item item-divider">Recent Updates</div>
  <div class="item item-body">
    <div>
      There is a fire in <b>sector 3</b>
    </div>
  </div>
</div>
</div>

<div class="junk_wrap">
<div class="chat-item ng-enter_r1 ng-enter-stagger list card">  
  <div class="item item-divider">Health</div>
  <div class="item item-body">
    <div>
      You ate an apple today!
    </div>
  </div>
</div>
</div>

<div class="junk_wrap">
<div class="chat-item ng-enter_l2 ng-enter-stagger list card">  
  <div class="item item-divider">Health</div>
  <div class="item item-body">
    <div>
      You ate an apple today!
    </div>
  </div>
</div>
</div>

<div class="junk_wrap">
<div class="chat-item ng-enter_r2 ng-enter-stagger list card">  
  <div class="item item-divider">Health</div>
  <div class="item item-body">
    <div>
      You ate an apple today!
    </div>
  </div>
</div>
</div>

<div class="junk_wrap">
<div class="chat-item ng-enter_l3 ng-enter-stagger list card">  
  <div class="item item-divider">Health</div>
  <div class="item item-body">
    <div>
      You ate an apple today!
    </div>
  </div>
</div>
</div>

<div class="junk_wrap">
<div class="chat-item ng-enter_r3 ng-enter-stagger list card">  
  <div class="item item-divider">Health</div>
  <div class="item item-body">
    <div>
      You ate an apple today!
    </div>
  </div>
</div>
</div>

CSS

.junk_wrap { width: 100%; }
.chat-item { border: solid 1px #aa3366; }
.chat-item:nth-child(even) { border: solid 1px #aa3366; }
.list:last-child.card { margin-bottom: 5px; }

.chat-item.ng-enter_l1 {
  width: 50%;
  float: left;
    -webkit-animation: zoomInLeft 1s;
    animation: zoomInLeft 1s;
    -webkit-animation-delay: 1s;
}

.chat-item.ng-enter_r1 {
  width: 50%;
  float: right;
    -webkit-animation: zoomInRight 2s;
    animation: zoomInRight 2s;
    -webkit-animation-delay: 2s;
}

.chat-item.ng-enter_l2 {
  width: 50%;
  float: left;
    -webkit-animation: zoomInLeft 3s;
    animation: zoomInLeft 3s;
    -webkit-animation-delay: 3s;
}

.chat-item.ng-enter_r2 {
  width: 50%;
  float: right;
    -webkit-animation: zoomInRight 4s;
    animation: zoomInRight 4s;
    -webkit-animation-delay: 4s;
}

.chat-item.ng-enter_l3 {
  width: 50%;
  float: left;
    -webkit-animation: zoomInLeft 5s;
    animation: zoomInLeft 5s;
    -webkit-animation-delay:5s;
}

.chat-item.ng-enter_r3 {
  width: 50%;
  float: right;
    -webkit-animation: zoomInRight 6s;
    animation: zoomInRight 6s;
    -webkit-animation-delay: 6s;
}

.chat-item.ng-enter-stagger {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;

  -webkit-animation-duration:0;
  animation-duration:0;
}

ion-item { border: solid 2px #ddd; }