Css 从0开始交错淡入div不透明度

我有三个div，根据页面上的一个航路点淡入。我正试着把这些潜水艇错开。我遇到的问题是，我正在从“不透明度：0”淡入，一旦添加了“动画”类，所有div都会显示（然后延迟的div将从“不透明度：1”播放动画）。这可能是一个愚蠢的问题，但我想不出一个方法来延迟第二和第三版的不透明度，而不必给他们单独的动画类。任何帮助都将不胜感激

.project {
  opacity: 0;
}

.project.animated {
  opacity: 1;
  animation-name: fadeInDown;
  animation-duration: 1s;

  &:nth-child(2) {
    animation-delay: .3s;
  }
  &:nth-child(3) {
    animation-delay: .6s;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -40%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

编译的CSS:

.project {
  opacity: 0;
}
.project.animated {
  opacity: 1;
  animation-name: fadeInDown;
  animation-duration: 1s;
}
.project.animated:nth-child(2) {
  animation-delay: .3s;
}
.project.animated:nth-child(3) {
  animation-delay: .6s;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -40%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

---

选项1:

.project {
  opacity: 0;
}
.project.animated {
  opacity: 1;
  animation-name: fadeInDown;
  animation-duration: 1s;
}
.project.animated:nth-child(2) {
  animation-delay: .3s;
}
.project.animated:nth-child(3) {
  animation-delay: .6s;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -40%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

从

.animated

类中删除

不透明度：1

，并添加

动画填充模式：forwards

。此设置意味着动画元素将保持其最后一个关键帧的状态（具有

不透明度：1

），因此不需要额外的属性设置

window.onload=function（）{
setTimeout（函数（）{
var els=document.querySelectorAll（'.project'）；
对于（变量i=0；i

.project{
不透明度：0；
}
.项目.动画{
/*不透明度：1*/
动画名称：fadeInDown；
动画持续时间：1s；
动画填充模式：正向；
}
.项目.动画：第n个孩子（2）{
动画延迟：.3s；
}
.项目.动画：第n个孩子（3）{
动画延迟：.6s；
}
@关键帧淡入淡出{
从{
不透明度：0；
转换：translate3d（0，-40%，0）；
}
到{
不透明度：1；
转化：无；
}
}
/*只是为了演示*/
.项目{
高度：100px；
宽度：100px；
背景：红色；

首先
第二
第三个

.project.animated{
不透明性：1；我编辑了你的问题并添加了编译后的CSS代码，因为不是每个人都熟悉Sass/Less语法（这会导致大量的评论质疑语法、混淆）。发布编译后的CSS总是更好的，除非问题出在预处理器本身。