Javascript 延迟盒FadeIn动画

我已经创建了一个淡入效果的单一元素（

.box>div

）当用户向下滚动网站。我使用Javascript检查元素是否只是滚动到视图中，然后添加类

.fadeInUp

，以添加动画效果

这就是我如何通过

动画延迟在另一个元素后淡入另一个元素的方法：

.fadeInUp {
    & + .fadeInUp {
        animation-delay: 300ms;
        & + .fadeInUp {
            animation-delay: 600ms;
            & + .fadeInUp {
                animation-delay: 900ms;
                & + .fadeInUp {
                    animation-delay: 1200ms;
                    & + .fadeInUp {
                        animation-delay: 1500ms;
                    }
                }
            }
        }
    }

    opacity: 0;
    animation: fadeInUp 1000ms forwards;
}

但是，我想将我的SCSS代码缩短为选择具有相同类名的下一个同级类，因为如果我将框添加到HTML部分，我还需要将
动画延迟
添加到SCSS部分


问题：

有没有一个选项可以在不知道会有多少框的情况下使用本机CSS（或者SCS）来缩短这种行为？差不多

& + * { ... }

但是具体到类
.fadeInUp
，并且在下一个兄弟类中将
动画延迟
值增加300ms


我创建这支笔是为了演示我的问题，并使其更加清晰：

代码笔：

据我所知，我认为用纯CSS解决方案是不可能做到这一点的

在将来，这可能是您正在寻找的解决方案：。
现在，我要添加一个简单的
e.style.animationDelay=I*300+“ms”并让javascript执行。。。“肮脏的工作”


查看功能（el）{
let box=el.getBoundingClientRect（）；
返回box.top=0；
}
const-box=document.queryselectoral（'.box>div'）；
window.onscroll=（w）=>{
框。forEach（（e，i）=>{
e、 style.animationDelay=i*300+“ms”；
如果（查看（e））{
e、 添加（'fadeInUp'）；
}
});
}
正文{
高度：2000px；
显示：网格；
证明项目：中心；
}
.盒子{
利润上限：1000px；
显示：网格；
网格模板列：重复（3，1fr）；
网格模板行：300px；
栅极间隙：30px；
证明项目：中心；
宽度：80%；
}
.boxes分区{
高度：300px；
宽度：300px；
盒影：0 0 15px#ccc；
背景图片：url(https://images.unsplash.com/photo-1542141372-98a047557466?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=500&q=60）；
背景尺寸：封面；
}
.BOX分区：第n个孩子（2）{
背景图片：url(https://images.unsplash.com/photo-1522057306606-8d84daa75e87?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=500&q=60）；
}
.BOX分区：第n个孩子（3）{
背景图片：url(https://images.unsplash.com/photo-1505870136463-c17bc84b30a2?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=500&q=60）；
}
.BOX分区：第n个孩子（4）{
背景图片：url(https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=500&q=60）；
}
.BOX分区：第n个孩子（5）{
背景图片：url(https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=500&q=60）；
}
.BOX分区：第n个孩子（6）{
背景图片：url(https://images.unsplash.com/photo-1514828980084-9462f7d03afc?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=500&q=60）；
}    
法代努普先生{
不透明度：0；
动画：向前飞1000毫秒；
}
@关键帧淡入淡出{
0% {
不透明度：0；
变换：translateY（20px）；
}
100% {
不透明度：1；
变换：translateY（0）；
}
}

我认为在未来，这可能是您正在寻找的解决方案：。现在，我要添加一个简单的
e.style.animationDelay=I*300+“ms”并让javascript完成肮脏的工作；-）感谢这个有用的链接和你的js建议@ReSedano我也想到了这一点，但首先想知道是否有CSS的可能性。如果您发布您的评论，我们将接受您的回复。：）好啊非常感谢你！为了解决您的问题，我添加了另一个观点：-）