Creating CSS only sequential fade-in DIV using loop

Question

Following code is using jQuery. Is it possible to create a CSS only version using loop. I have seen examples of showing DIVs but each DIVs were separately coded with time delay. Such codes will require updating CSS if I add additional DIVs. Instead I would like to use some sort of loop in CSS if possible.

$("#main-container div").each(function(i) {
  $(this).delay(500 * i).fadeIn(1500);
});

.ig-element {
  width: 200px;
  height: 200px;
  float: left;
  border: 1px solid grey;
  display: none;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-container">

  <div class="ig-element">a</div>
  <div class="ig-element">b</div>
  <div class="ig-element">c</div>

  <div class="ig-element">d</div>
  <div class="ig-element">e</div>
  <div class="ig-element">f</div>

  <div class="ig-element">g</div>
  <div class="ig-element">h</div>
  <div class="ig-element">i</div>

</div>

Answer 1

You can't do loops only using pure CSS. But you can do if you use CSS Preprocessors such as SASS or LESS like this:

SASS

@for $i from 1 through 9 {
    .#main-container:nth-child(#{$i}n) {
        animation-delay: {$i * 0.5}s;
    }
}

LESS

.mixin-loop (@i) when (@i > 0) {
  // Output the current counter
  .main-container:nth-child(@{i}) {
    animation-delay: {@i * 0.5}s;
  } 
  // The mixin calls itself, recursively
  // until the "@i > 0" condition is no longer met
  .mixin-loop(@i - 1);
}

// Call the mixin with a counter to start the loop
.mixin-loop(9);

You can find more ways and learn more on this link.