在页面滚动到某个片段之前，如何防止 CSS 动画？答案

【问题标题】：How can I prevent CSS animations until the page scrolls to a certain fragment?在页面滚动到某个片段之前，如何防止 CSS 动画？
【发布时间】：2021-06-14 19:09:34
【问题描述】：

我有登陆页面（一页）网站。我在登录页面的中心有文本，用 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>

Screenshot of this element

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

【问题讨论】：

标签： javascript html css mobile-website

【解决方案1】：

我不明白你想如何触发动画。这就是为什么我无法为 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-underlined:after 中删除这 4 个动画属性

【讨论】：

我希望动画在进入网站后不运行。我希望它仅在用户看到文本时运行（即文本应加下划线）。然后它应该起飞。
我想达到与这里相同的效果：essentials.pixfort.com/seo/features 但只有当用户将我的页面（一个登录页面）滚动到中间时
在这种情况下，您需要在页面加载时调用该函数而不进行 if-check。
好的，但是怎么做？你能帮助我吗？谢谢

【解决方案2】：

你可以像这样使用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（您想要的元素）上时，位置动画将开始

【讨论】：

【解决方案3】：

在你的动画类上，添加animation-play-state: paused;，现在有另一个选择器

.text-nice-underlined.animate.run-animation::after {
  animation-play-state: running;
}

现在添加一个事件到你的身体标签document.body.addEventListener('scroll', e => { ... })

在里面你想继续检查你的元素是否在视图中：

let elementInView = el.offsetTop < window.scrollY + document.documentElement.clientHeight

if (elementInView) {
  el.classList.add('run-animation')
}

希望这对你有用，虽然我在某处读到过劫持或监听滚动事件并不是提高性能的最佳选择，但我希望有人能对此有所了解。

编辑：如果你有一些特殊的动画，你只需要这样做，如果你只需要在页面中添加微妙的淡入动画，考虑试试this library

【讨论】：