JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html, body {
    height:100%;
}
body {
    margin:0;
    background:#f6f6f6;
}
ul li {
    list-style: none;
    float:left;
    margin:1em;
    width:10em;
    height:7em;
    box-shadow: 0 0 0 4px rgba(0, 55, 255, 0.3), 0 0 0 2px rgba(0, 55, 255, 0.7) inset;
    transition: 0.3s ease-in-out;
    -webkit-transform: translateY(15px);
    opacity:0.5;
}
ul li.on {
    -webkit-transform: translateY(0px);
    opacity:1;
}

JavaScript

// Qual código faria com que a cada X milissegundos
// o próximo <li> recebesse a classe ".on"?
var indice = 0;
var interval = setInterval(function() {
    var proximo = $("li").eq(indice++);
    if ( proximo.length == 0 )
        clearInterval(interval);
    else
        proximo.addClass("on");
}, 500);