css - 如何根据第 n 个位置添加*渐进式*动画延迟？

Question

我想要为元素列表添加动画。第一个动画应延迟 0 毫秒，第二个动画应延迟 50 毫秒，第三个动画延迟 100 毫秒，依此类推。该列表是动态的，所以我不知道长度。

这可能吗？注意:我不需要具体的动画/关键帧帮助，但如何使用 nth-child 或 nth-of-type (或其他什么？)来实现基于 sibling 之间相对位置的渐进式动画延迟。

如果有帮助的话，我正在使用 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>