css - 从 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:

从 .animated 类中删除 opacity: 1 并添加 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:

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

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>