n番目の位置に基づいて*プログレッシブ*アニメーション遅延を追加するにはどうすればよいですか？

Question

私はアイテムのリストをアニメートしたいと思います。最初のアニメーションは0msの遅延でアニメーションする必要があり、2番目のアニメーションは50msの遅延で同じアニメーションを実行し、3番目のアニメーションは100msの遅延などを必要とします。リストは動的なので、私は長さを知らない。

これは可能ですか？注意：アニメーション/キーフレームのヘルプは特に必要ありませんが、nth-child型やnth-of-type（または他のもの）を使用して、兄弟間の相対位置に基づいてアニメーションの遅延をプログレッシブにする方法を教えてください。

私はReact/SASS/Webpackを使用しています。必要に応じてjQueryを使用できますが、できるだけ避けたいと思います。

Answer 1

ここでは、純粋なCSSでこれを行う方法の例を示します。 簡単に変更してニーズに合わせることができます。

$(document).ready(function() { 
 

 
    $('.myList img').each(function(i){ 
 
    var item = $(this); 
 
    setTimeout(function() { 
 
     item.toggleClass('animate'); 
 
    }, 150*i); 
 
    }) 
 

 
});

@keyframes FadeIn { 
 
    0% { 
 
    opacity: 0; 
 
    transform: scale(.1); 
 
    } 
 

 
    85% { 
 
    opacity: 1; 
 
    transform: scale(1.05); 
 
    } 
 
    100% { 
 
    transform: scale(1); 
 
    } 
 
} 
 

 
.myList img { 
 
    float: left; 
 
    margin: 5px; 
 
    visibility: hidden; 
 
} 
 

 
.myList img.animate { 
 
    visibility: visible; 
 
    animation: FadeIn 1s linear; 
 
    animation-fill-mode:both; 
 
    animation-delay: .5s 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myList"> 
 
    <img src="http://placehold.it/350x30" /> 
 
    <img src="http://placehold.it/350x30" /> 
 
    <img src="http://placehold.it/350x30" /> 
 
    <img src="http://placehold.it/350x30" /> 
 
    <img src="http://placehold.it/350x30" /> 
 
</div>