How to add a *progressive* animation delay based on n-th position?

Question

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

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

I'm using React / SASS / Webpack if that helps. I can use jQuery if necessary but I'd rather avoid it if possible.

Answer 1

Here's an example on how to do something like this with pure CSS. You can easily alter 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>