JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<ul>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
  <li class="elem">test</li>
</ul>

CSS

.elem {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid #eee;
  margin: 10px;
  background-color: white;
  transition: background-color 600ms;
}

.appear {
  background-color: red;
}

JavaScript

var all = document.getElementsByClassName('elem');

var i = 0;
var myVar = setInterval(appear, 50);

function appear() {
  all[i].classList.add("appear");
  i = i+1;
  if(all.length === i) {
  	clearInterval(myVar);
  }
}