CSS List Gradual Fade In With Unknown Amount

I was trying to make a gradual fadein using normal CSS and no jquery on a list so it can fade in one-by-one. However, I only know how to do it in a limited amount of list. How do I

Solution 1:

Here is an idea using CSS variable that allow you to reduce the code. It's not generic but it's more easier to append a simple inline CSS to each li than writing complex CSS:

.ladder {
  opacity: 0;
  animation: fadeIn 1s var(--d) forwards;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

<ul>
  <li style="--d:0s" class="ladder">A</li>
  <li style="--d:0.2s" class="ladder">B</li>
  <li style="--d:0.4s" class="ladder">C</li>
  <li style="--d:0.6s" class="ladder">D</li>
  <li style="--d:0.8s" class="ladder">E</li>
</ul>

Here is another idea where you can apply an animation on the ul:

ul {
  position:relative;
}
ul:before {
  content:"";
  position:absolute;
  top:-20px;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(to bottom,transparent,#fff 20px);
  animation:fadeIn 2s forwards
}

@keyframes fadeIn {
  0% {
    top:-10px;
  }
  100% {
    top: 100%;
  }
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>