JSFiddle - React, Tailwind, and code Playground

by Ajey

HTML

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

li {
  margin: 5px;
  background-color: red;
  width: 0px;
}

@keyframes stretch {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

JavaScript

$(function(){
    var delay = 0;
    $('ul>li').each(function(){
        var $this = $(this);
        $this.css('animation', 'stretch 2s');
        $this.css('animation-delay', delay+'s');
        $this.on("webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend", function(){
        	$this.width('100%');
        });
        delay += 2;
    });
});