动画延迟不适用于选择器

Question

我已经实现了 jquery-visible ，以便在视口中加载可见元素或滚动时实现滑入效果（但是，这在这里并不重要，但是只是为了您了解 visible （）函数代表），我想自定义效果，以使在加载时在视口中滑动的元素具有每个不同的延迟，当前不适用于这些元素。

slideInAsScroll: function() {
  var win = $(window);
  var allMods = $(".load-group");
  // Already visible modules in the viewport
  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in");
      $("come-in:nth-child(1)").css("animation-delay", "1s");
      $("come-in:nth-child(2)").css("animation-delay", "2s");
      $("come-in:nth-child(3)").css("animation-delay", "3s");
      $("come-in:nth-child(4)").css("animation-delay", "4s");
    }
  });
  // Not visible modules in the viewport
  win.scroll(function(event) {
    allMods.each(function(i, el) {
      var el = $(el);
      if (el.visible(true)) {
        el.addClass("come-in");
      }
    });
  });
}

还有我的 CSS

.come-in {
 transform: translateY(150px);
 opacity: 0;
 animation: come-in 0.8s ease forwards;
}

@keyframes come-in {
 to {
 transform: translateY(0);
 opacity: 1;
}