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

@keyframes fadeIn {
  from{
    opacity: 0;
  }
}

li{
  animation:fadeIn .2s ease-in-out;
  animation-fill-mode:backwards;
  animation-delay:calc(var(--i) * 0.1s);
}











/* unrelated styles */
body{
  margin:0;
  background:#222;
}
ul{
  display:flex;
  flex-direction:column;
  list-style:none;
  padding:0;
  margin:0;
}
li{
  background:linen;
  height:20px;
}
li:nth-child(even){
  background:PaleVioletRed;
}

const listItems = document.querySelectorAll("ul li");
listItems.forEach((item, index) => {
   item.style.setProperty("--i", index);
});