JSFiddle - React, Tailwind, and code Playground

HTML

<div class="animate1">Item 1</div>
  <div class="animate2">Item 2</div>
  <div class="animate3">Item 3</div>
  <div class="animate4">Item 4</div>
  <div class="animate5">Item 5</div>
  <div class="animate6">Item 6</div>
  <div class="animate7">Item 7</div>
  <div class="animate8">Item 8</div>

CSS

.animate1, .animate2, .animate3, .animate4, .animate5, .animate6, .animate7, .animate8 {
  width: 300px;
  background-color: red;
  margin: 5px auto;
  padding: 10px 0;
  color: white;
  text-align: center;
}

.animate {
  width:100%;
    transition: width .5s linear;
}

JavaScript

var i = 1; 
function animate() { 

var thisone = $(".animate" + i);
thisone.addClass('animate');

thisone.on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
    function(e) {
    i++;
    if (i < 9) {
    animate();
    }
  });
};

animate();