2

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.

John Trichereau
  • 626
  • 9
  • 22

1 Answers1

2

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>
Vassilis Pits
  • 3,788
  • 4
  • 33
  • 48
  • This answer is good for a fixed-length list, and it might even be ok for what I would need. However, the question was about dynamic lists where you don't know the length. Any clues about that? – John Trichereau Nov 23 '16 at 12:05
  • 1
    @JohnTrichereau check my updated answer. I added some simple jquery there and now the list items can come dynamically. I think now you are covered ;) – Vassilis Pits Nov 23 '16 at 13:37