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

Question

我有三个 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;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -40%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

Answer 1

选项1：

opacity: 1从类中删除.animated并添加animation-fill-mode: forwards. 此设置意味着动画元素将保持其最后一个关键帧（具有 ）时的状态opacity: 1，因此不需要额外的属性设置。

window.onload = function() {
  setTimeout(function() {
    var els = document.querySelectorAll('.project');
    for (var i = 0; i < els.length; i++) {
      els[i].classList.add('animated');
    }
  }, 100);
}

.project {
  opacity: 0;
}
.project.animated {
  /*opacity: 1;*/
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.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;
  }
}
/* just for demo */

.project {
  height: 100px;
  width: 100px;
  background: red;

<div class='project'>First</div>
<div class='project'>Second</div>
<div class='project'>Third</div>

选项2：

如果出于某种原因您不想opacity: 1从.animated类中删除 ，则将 设置animation-fill-mode: backwards为元素。这将使动画元素opacity: 0在此期间保持其第一个关键帧 ( )中提到的状态animation-delay，因此该元素不会立即显示。

window.onload = function() {
  setTimeout(function() {
    var els = document.querySelectorAll('.project');
    for (var i = 0; i < els.length; i++) {
      els[i].classList.add('animated');
    }
  }, 100);
}

.project {
  opacity: 0;
}
.project.animated {
  opacity: 1;
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: backwards;
}
.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;
  }
}
/* just for demo */

.project {
  height: 100px;
  width: 100px;
  background: red;

<div class='project'>First</div>
<div class='project'>Second</div>
<div class='project'>Third</div>