How to add * progressive * animation delay based on nth position?

Question

I would like to animate the list of items. The first should be animated with a 0 ms delay, the second should do the same animation with a delay of 50 ms, the third with a delay of 100 ms, and so on. The list is dynamic, so I don't know the length.

Is it possible? Note. I don't need help with animations / keyframes, but how to use nth-child or nth-of-type (or something else?) To achieve progressive animation delay based on the relative position between siblings.

I use React / SASS / Webpack if this helps. I can use jQuery if necessary, but I would prefer to avoid this if possible.

Answer 1

Here is an example of how to do something similar using pure CSS. You can easily change it to bring it to your needs.

$(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>