<ol id="ul"></ol>

#ul{
  width: 100%;
  background: orange;
  margin: 0;
  box-sizing: border-box;
}

li{
  background: yellow;
  margin-top: 3px;
  width: 0%;
  transition: 1s ease;
}

#ul:hover li{
  width: 95%;
}

let i=0, out="", sec = 0.1;

while (i<20) {
 i++;
 out += `<li></li>`;
}

ul.innerHTML = out;

document.querySelectorAll("li").forEach(function (el, index) {
  el.style.transitionDelay = `${sec * index}s`;
})