如何給一個css類的每個孩子添加動畫延遲

Question

我想製作一個級聯樣式，卡向上滑動動畫。

我已經完成了幻燈片的部分工作。問題在於所有卡片同時滑動。

我想知道如何給每一個添加一個延遲。由於卡的數量可能會不時變化，因此我無法使用css :nth-child(n)選擇器來實現此功能。

繼承人的HTML

<div class='entry animated slideInEntry'> 

    <div> 
     <span>$submitter</span> 
     <span>$amount</span> 
    </div> 

    <div>$ratingIcon</div> 

</div> 

這是CSS動畫

/* Entry Card Animation -Entry Card Animation -Entry Card Animation -Entry Card Animation -Entry Card Animation */ 

.slideInEntry{ 
    -webkit-animation-name: slideInEntry; 
      animation-name: slideInEntry; 
    -webkit-animation-duration: 1.5s; 
      animation-duration: 1.5s; 
    -webkit-animation-timing-function: ease-out; 
      animation-timing-function: ease-out; 
} 

@-webkit-keyframes slideInEntry{ 

    0%{ 
    visibility: hidden; 
    margin: 500px; 
    } 

    50%{ 
    -webkit-transform: translateY(500px); 
      transform: translateY(500px); 
    visibility: visible; 
    } 

    100%{ 
    -webkit-transform: translateY(0); 
      transform: translateY(0); 
    } 

} 

@keyframes slideInEntry{ 
    0%{ 
    visibility: hidden; 
    margin: 500px; 
    } 

    50%{ 
    -webkit-transform: translateY(500px); 
      transform: translateY(500px); 
    visibility: visible; 
    } 

    100%{ 
    -webkit-transform: translateY(0); 
      transform: translateY(0); 
    } 

} 

Answer 1

試試這個jQuery代碼：

var count = 0; 
$(document).ready(function() { 

    var intv = setInterval(function() { 
    $("#span" + count).show(); 
    $("#span" + count).addClass("entry animated slideInEntry"); 
    if (count > $("span").length) { 
     clearInterval(intv); 
     return; 
    } else { 
     count = count + 1; 
    } 
    }, 1000); 
}); 

這裏的小提琴： https://jsfiddle.net/sampada07/vffxd80w/2/