Javascript CSS动画一个接一个地应用于元素？

我正在尝试在我的项目中使用CSS动画

一切正常。但是，当我运行代码时，CSS动画会同时应用于类

.allPro

的所有元素

有没有办法单独应用CSS动画

例如，使第一个元素出现，然后是第二个元素，然后是第三个元素，依此类推

这是我的密码

这是我的CSS代码：

.allPro {
  width:150px;
  height:150px;
  float:left;
  margin:5px;
  background-color:#000;
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

元素是动态创建的。所以我无法预测页面上会有多少元素

我愿意使用jQuery来实现我想要做的事情

编辑：

这就是我在页面上动态创建元素并将其附加到容器的方式：

$(document).ready(function() {
  var poutput = $('.dotted-list');
  $.ajax({
    url: 'https://mydonain.com/page.php',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function(data, status) {
      $.each(data, function(pi, item) {
        str = item.name;
        if (str.length > 2) str = str.substring(0, 2)
        var products = '<a class="allPro" data-id="' + item.id + '" data-name="' + item.name + '" data-type="' + item.type + '" href="" data-transition="slidefade">' + '<div class="products-feed-Small">' + '<div style="position:absolute; top:40%; text-align:center; width:100%; color:#fff; font-family:Walpurga; font-size:28px; font-weight:bold; text-decoration: none;">' + item.name + '</div>'

        +'<img src="62.jpg" >' + '</div>' + '</a>';
        poutput.append(products);
        $('.allPro').each(function() {
          var delay = $(this).index();
          $(this).css('animation-delay', delay + 's');
        });
        //$( "#load-more" ).show();
      });
    },
    error: function() {
      poutput.text('There was an error loading the data.');
    }
  });
});

$（文档）.ready（函数（）{
var poutput=$（“.虚线列表”）；
$.ajax({
网址：'https://mydonain.com/page.php',
数据类型：“jsonp”，
jsonp:'jsoncallback'，
超时：5000，
成功：功能（数据、状态）{
$。每个（数据、功能（pi、项目）{
str=item.name；
如果（str.length>2）str=str.substring（0,2）
var乘积=“”；
添加（产品）；
$（'.allPro'）。每个（函数（）{
var delay=$（this.index（）；
$（this.css（'animation-delay'，delay+'s'）；
});
//$（“#加载更多”）.show（）；
});
},
错误：函数（）{
text（'加载数据时出错'）；
}
});
});

使用jQuery（或JavaScript）执行此操作的一种方法是找到元素的

索引

，然后根据它设置

动画延迟

，如下面的代码片段所示

需要注意的一点是，我在

动画

中添加了

向后

（

动画填充模式

）。这是必需的，因为在动画的延迟计时器过期之前，元素通常将保持默认状态。在这种情况下，默认状态为

opacity:1

（因为

.allPro

上没有

opacity

设置）。这意味着所有元素一次可见，然后当动画实际开始时，它们会闪烁

通过将

向后设置为填充模式，我们指示UA在延迟期间元素应保持第一个关键帧中提到的状态。此更改意味着元素在附加后立即获得
不透明度：0
设置（因为
动画
已添加到默认选择器中）。因此，它们仅在动画实际发生时才开始出现，而不是在动画发生之前


$（文档）.ready（函数（）{
对于（变量i=0；i<10；i++）{
$（'body'）。追加（''）；
}
$（'.allPro'）。每个（函数（）{
var delay=$（this.index（）；
$（this.css（'animation-delay'，delay+'s'）；
});
});
.allPro{
宽度：150px；
高度：150像素；
浮动：左；
保证金：5px；
背景色：#000；
动画：fadein 2s向后；
}
@关键帧淡入淡出{
从{
不透明度：0
}
到{
不透明度：1
}
}
好的，如果元素是动态的，那么您需要使用JavaScript。CSS对此无能为力。如果您可以使用JS/jQuery，我可以给出一个解决方案。那么使用CSS没有办法做到这一点吗？没有，因为CSS使其顺序化的唯一方法是添加
动画延迟
，并且当您有动态元素数时，您无法为每个元素编写选择器。@Harry，请分享您的jQuery解决方案吗？如果您愿意考虑jQuery，或者纯JavaScript，请将这些标签添加到您的问题中（使用链接）。谢谢，尽管这很好。我的问题是，所有元素都是动态的，并使用jQueryAjax附加到容器中。所以当我使用jQuery代码时，元素被附加到容器中，然后它们分别闪烁一次。。。我错过了CSS中的后退，当我添加它时。它很有魅力。。谢谢你指出…啊，很抱歉我也错过了。我应该在回答中明确提到这一点，因为这是我做出的改变。没关系，我会在中编辑它，并解释为什么我也添加了它：）我也应该看看你的CSS。英雄联盟嘿嘿。。它现在又起作用了，thanks@Jackson当前位置我现在还在答案中添加了解释。如果您需要关于此的任何进一步详细信息，请告诉我：）