能够在Css，Less，scss上使用循环代替

Question

我有以下代码：https://codepen.io/dj-smoke-starboy/pen/jXxJRd。并且工作正常，但是我试图在css文件上使用循环以达到相同的结果。

我尝试了jQuery，但我仍然需要在css或更少的文件内使用循环。

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内部使用循环来达到相同的结果