基于滚动位置的增量 CSS 动画

Question

我使用下面的代码根据窗口滚动位置逐步播放暂停的 CSS 动画。

我现在遇到的问题是，一旦我开始滚动，所有暂停的动画都会同时触发。我希望每个动画仅在其父 div 进入视口时开始。

知道我该怎么做吗？提前致谢。

window.addEventListener("scroll", () => {
  document.body.style.setProperty("--scroll", window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);

 

.quest_con {
  height: 100vh;
 }
.quest {
  animation: slide_down .5s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1.5s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
  opacity: 0;
}

@keyframes slide_down {
  0% {
    opacity: 0;
  }
  50% {
    transform: translate(0, -350px);
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

    <div class="col-12 quest_con quest_con_1">
       <i class="fas fa-question quest text_xxl color_2"></i>
       <i class="fas fa-running text_xl color_2"></i>
    </div>

    <div class="col-12 quest_con quest_con_2">
       <i class="fas fa-question quest text_xxl color_2"></i>
    </div>

    <div class="col-12 quest_con quest_con_2">
       <i class="fas fa-question quest text_xxl color_2"></i>
    </div>

Answer 1

您可以使用 IntersectionObserver API 轻松存档。你可以看看 MDN 文档：MDN - IntersectionObserver API IntersectionObserver 管理元素的所有“In View”状态。