JSFiddle - React, Tailwind, and code Playground

HTML

<div  ng-app="myApp" ng-controller="animationsCtrl">
  <div class="table">
    <div ng-repeat="item in items" class="row">
      This is a table row {{item}}
    </div>
  </div>
 <!--  <div>
    <div class="box"> Box 1</div>
    <div class="box"> Box 1</div>
    <div class="box"> Box 1</div>
  </div> -->
</div>

CSS

.table{margin-bottom: 20px;}
.row{width: 200px; border: 1px solid red; height: 30px;}
.box{display: inline-block; width: 63px; border: 1px solid blue; height: 50px;}


.row {
    position: relative;
    display: block;
    animation: Fade-Enter-Anime 2s;
}
 
.row.ng-enter{
   transition: 2s linear all;
   
}

.row.ng-enter-active{
 -webkit-animation:  Fade-Enter-Anime 2s;
   
}
.row.ng-enter-stagger{
    -webkit-transition-delay:2s;
    transition-delay:2s;
    transition-duration:0s;
}
.row.ng-leave-active {
  -webkit-animation:  Fade-leave-Anime 2s;

}
    
 
  
@keyframes Fade-Enter-Anime {
  from { -webkit-transform: translateX(-200px); }
  to { -webkit-transform: translateX(0px); }
}

@-webkit-keyframes Fade-Enter-Anime {
  from { -webkit-transform: translateX(-200px); }
  to { -webkit-transform: translateX(0px); }
}

JavaScript

var app = angular.module('myApp', ['ngAnimate']);
app.controller('animationsCtrl', function ($scope) {
  $scope.arr=[1,2,3];
  $timeout(function() {
      $scope.items = $scope.firstSet;
    }, 500);
  });