JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<ul id="myList">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

CSS

li {
    margin: 1px 0;
    padding: 0 5px;
    color: #333399;
     border-bottom: 1px solid #FFF; 
}
.animation {
    background-color: #CCCCFF;
    border-color: #333399;
}

JavaScript

function applyAnimation(element, delay){
 setTimeout(function(){ $(element).addClass('animation'); }, delay);
 var children = document.getElementById("myList").children;
 for( var i = 0; i < children.length; i++){
  applyAnimation(children[i],(2+i) * delay);//2+i:0 fails, 1 would be parent, 2 is child
 }
}