如何在wordpress主题中的每个帖子上使用Vanilla JS逐步增加动画延迟 _VanillaJS

我有一个php循环, 可在wordpress主题的存档类别页面上显示帖子。我还创建了一个动画, 将帖子从opacity = o转换为.2s中的opacity = 1。我想增加每个其他帖子的动画延迟, 以便列表中的第一个帖子在下一个帖子之前几毫秒出现。我已经使用：nth-??of-type(n)实现了最大发布限制为15。我知道这是非常无效的, 我想使用(循环吗？)JavaScript来处理动画延迟, 并增加时间。

@keyframes fade-in { 100% { opacity: 1; transform: translate(0, 0); } } #section-grid a:nth-of-type(1) { animation: fade-in .2s 0s forwards ease-out; }< ?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> < a href="http://www.srcmini.com/< ?php the_permalink(); ?>"> < div> < img src="http://www.srcmini.com/< ?php the_field('feature_image2'); ?> " alt="plant"> < aside> < ?php the_title(); ?> < /aside> < /div> < /a> < ?php endwhile; else: ?> < div class="page-header"> < h1> Coming Soon< /h1> < /div> < p> If there is nothing here that doesn't mean nothing is coming. Stay tuned for updates and new information.< /p> < ?php endif; ?>

【如何在wordpress主题中的每个帖子上使用Vanilla JS逐步增加动画延迟】我希望存档页面上每个新帖子的动画延迟都增加0.05秒。然后, 我可以从CSS中删除：nth-??of-type。
提前致谢。
#1你可以通过以下方式使用内联css(此处的延迟以毫秒为单位)：

#section-grid a:nth-of-type(1) {animation: fade-in .2s 0s forwards ease-out; }< ?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $last_anim=0; ?> < a href="http://www.srcmini.com/< ?php the_permalink(); ?>" style="animation:fade-in .2s .< ?php echo $last_anim; ?> ms forwards ease-out; "> < div> < img src="http://www.srcmini.com/< ?php the_field('feature_image2'); ?> " alt="plant"> < aside> < ?php the_title(); $last_anim+=500; ?> < /aside> < /div> < /a> < ?php endwhile; else: ?> < div class="page-header"> < h1> Coming Soon< /h1> < /div> < p> If there is nothing here that doesn't mean nothing is coming. Stay tuned for updates and new information.< /p> < ?php endif; ?>

#2我建议你为此使用JavaScript库。
https://greensock.com/docs/TimelineMax/staggerTo