我如何阻止CSS动画直到页面滚动到某个片段？

Question

我有登陆页（一页）网站。我有文本在中心的着陆页，突出显示与CSS动画。不幸的是，高亮显示这段文字的CSS动画是在进入网站后立即执行的。我怎么才能阻止它？如何使一个动画只在它出现在屏幕上时与文本一起运行。现在，当用户滚动并工作时，文本就会显示出来。不幸的是，下划线在进入网站后移动得更早。当用户滚动页面时，文本将带下划线：（

<h2 class=" title animated" data-animate="fadeInUp" data-delay=".4">lorem <span class="text-nice-underline">ipsum</span> <span class="text-nice-underline2" >example</span> template</h2>

此元素的屏幕截图

.text-nice-underline  {
 position: relative;
}
.text-nice-underline:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1; /* Place the pseudo element right under the content */
  top: 0;
  left: 0;
  background: linear-gradient(to top, #ffbc42 22%, transparent 24%);
  animation-name: highlight;
  animation-duration: 2.95s;
  animation-delay: 0.8s;
  animation-fill-mode: both;
}
.text-nice-underline2  {
    position: relative;
}
.text-nice-underline2:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1; /* Place the pseudo element right under the content */
  top: 0;
  left: 0;
  background: linear-gradient(to top, #ffbc42 22%, transparent 24%);
  animation-name: highlight;
  animation-duration: 3.95s;
  animation-delay: 1.4s;
  animation-fill-mode: both;
  

}
.text-nice-underline2:hover, .text-nice-underline:hover {
  background: linear-gradient(to top, #ffbc42 95%, transparent 95%);
}
@keyframes highlight {
  0% {
    width: 0;
    opacity: 0;
  }

  90% {
    width: 100%;
    opacity: 1;
  }
}

Answer 1

您可以像这样使用JS/jQuery事件侦听器

document.addEventListener('scroll', function(e) {
  const el = $('#myDiv');
  const scrollPosition = window.scrollY;

  if(el == scrollPosition) {
    document.querySelector(".text-nice-underlined").classList.add("animate");
   }
});

当滚动在您的div（您想要的元素）上时，位置动画将开始

Answer 2

我不明白你要怎么触发动画。这就是为什么我不能为Javascript部分提供帮助，但我的想法是创建一个函数来检查是否满足动画的条件，并运行下面的行。

const runAnimation = () => {
  if(your conditions) {
    document.querySelector(".text-nice-underlined").classList.add("animate");
  }
}

.text-nice-underlined.animate:after {
  animation-name: highlight;
  animation-duration: 2.95s;
  animation-delay: 0.8s;
  animation-fill-mode: both;
}

您需要从text-nice-下划线：after中删除这4个动画属性