Нужно, чтобы div-ы давили, используя только CSS

Question

У меня есть этот код, который использует jQuery, но я хочу знать, возможно ли достичь того же результата, используя только CSS. Это мой код на Codepen: https://codepen.io/dj-smoke-starboy/pen/REOgvj.

Я работаю над этим, но до сих пор я не мог заставить его работать, просто используя только css.

 Html:
<div class="cardWrap">
  <div class="card">pushed DOWN</div>
  <div class="card">10 - Itin</div>
  <div class="card">9 - Itin</div>
  <div class="card">8 - Itin</div>
  <div class="card">7 - Itin</div>
  <div class="card">6 - Itin</div>
   <div class="card">5 - Itin</div>
  <div class="card">4 - Itin</div>
  <div class="card">3 - Itin</div>
  <div class="card">2 - Itin</div>
  <div class="card">1 - Itin</div>

</div>

CSS:
body {
  background-color: #ddd;
  padding: 1em;
}
.cardWrap {
  display:flex;
  flex-direction:column-reverse;
 }
.card { 
  background:#fff; 
  animation: slide 0.5s linear both;
  margin-bottom: 1em;
  opacity: 0;
  padding:5px;
  transform: translateY(-5vh);


}

@keyframes slide {
  0% {
    filter: blur(1em);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
  }
}

JS:
$('.card').each(function(i) {
  $(this).fadeOut(1).delay(1000*i).fadeIn(100)
});

Для достижения того же результата, который я получаю, используя JS и jQuery.

Answer 1

я сделал снова:)

body {
  background-color: #ddd;
  padding: 1em;
}
.cardWrap {
  display:flex;
  flex-direction:column-reverse;
}
.card { 
  background:#fff; 
  animation: slide 0.5s linear both;
  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;}
}

<div class="cardWrap">
  <div class="card">pushed DOWN</div>
  <div class="card">10 - Itin</div>
  <div class="card">9 - Itin</div>
  <div class="card">8 - Itin</div>
  <div class="card">7 - Itin</div>
  <div class="card">6 - Itin</div>
   <div class="card">5 - Itin</div>
  <div class="card">4 - Itin</div>
  <div class="card">3 - Itin</div>
  <div class="card">2 - Itin</div>
  <div class="card">1 - Itin</div>
</div>