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/