小编ohv*_*nna的帖子

我有三个 div，根据页面上的路径点淡入。我正在尝试错开这些 div。我遇到的问题是因为我从不透明度：0 淡入它们，一旦添加“动画”类，所有的 div 都会显示（然后延迟的 div 将从不透明度：1 播放动画）。这可能是一个愚蠢的问题，但我想不出一种方法可以延迟第二个和第三个 div 的不透明度，而不必为它们提供单独的动画类。任何帮助将非常感激！

.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;
} …