Возможность использовать цикл вместо Css, Less, scss

Question

У меня есть этот код: https://codepen.io/dj-smoke-starboy/pen/jXxJRd. И работает нормально, но я пытаюсь использовать цикл в файле CSS для достижения того же результата.

Я пробовал jQuery, он работал, но мне все еще нужно использовать цикл внутри файла css или less.

Html:

<div class="cardWrap">
  <div class="card">itin 1</div>
  <div class="card">itin 2</div>
  <div class="card">itin 3</div>
  <div class="card">itin 4</div>
  <div class="card">itin 5</div>
  <div class="card">itin 6</div>
  <div class="card">itin 7</div>
  <div class="card">itin 8</div>
  <div class="card">itin 9</div>
  <div class="card">itin 10</div>
</div>

CSS:

body {
  background-color: #ddd;
  padding: 1em;
}

.cardWrap {
 display:flex;
 flex-direction:column-reverse;
}

.card { 
  background:#fff; 
  margin-bottom: 0;
  opacity: 0;
  padding:0;
  height:0px;
  width:0px;

}

.card:nth-child(1) {
  animation: card1 .3s forwards .5s;
}

.card:nth-child(2) {
  animation: card1 .3s forwards 1.5s;
}

.card:nth-child(3) {
  animation: card1 .3s forwards 2.5s;
}

.card:nth-child(4) {
  animation: card1 .3s forwards 3.5s;
}

.card:nth-child(5) {
  animation: card1 .3s forwards 4.5s;
}

.card:nth-child(6) {
  animation: card1 .3s forwards 5.5s;
}

.card:nth-child(7) {
  animation: card1 .3s forwards 6.5s;
}

.card:nth-child(8) {
 animation: card1 .3s forwards 7.5s;
}

.card:nth-child(9) {
  animation: card1 .3s forwards 8.5s;
}

.card:nth-child(10) {
  animation: card1 .3s forwards 9.5s;
}

.card:nth-child(11) {
  animation: card1 .3s forwards 10.5s;
}
@keyframes card1{
  to {
    opacity:1;
    height:auto;
    width:auto;
    padding:5px;
    margin-bottom: 1em;
   }
}

Я ожидал добиться того же результата с помощью цикла, используя его внутри файла CSS или Less / scss