Javascript 当用户滚动到页面的某个部分时，如何触发关键帧

是否可以使用纯javascript检测用户在页面上滚动以触发关键帧的位置

    .animations {
    opacity: 0;
    animation: animations-keyframes 2s ease forwards;
    -webkit-animation: animations-keyframes 2s ease forwards;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
@keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}
@-webkit-keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}

---

我希望javascript在用户访问页面的某个部分（例如内容部分）时触发此事件。我不知道从哪里开始使用javascript，您可以在

mouseenter

事件中将类

animations

添加到元素中，并在

mouseleave

事件中删除该类。因为您没有提到jQuery，所以我将使用简单的JS，但是如果您打算进行一系列DOM操作，我建议使用，因为它更易于维护

例如：

JAVASCRIPT:

var el = document.getElementById("animation");

el.onmouseenter = function (){
    this.classList.add("animations");
};

el.onmouseleave = function (){
    this.classList.remove("animations");
};

---

但是，您也可以仅使用CSS和伪

：hover

来完成此操作

例如：

CSS:

---

希望这有帮助，让我知道如果你有任何问题

当滚动到页面的某些部分时，航路点可用于触发事件。

---

简单来说，事件监听器是为滚动事件创建的——比较向下滚动页面的距离和元素与页面顶部的距离。如果用户滚动到元素之外，则会触发事件（滚动距离>元素距页面顶部的距离）

非常感谢，我将继续并开始调查谢谢。我知道jQuery可以更容易地处理这个问题，但我需要编写自定义脚本。这帮了大忙，谢谢

.animations:hover {
    opacity: 0;
    animation: animations-keyframes 2s ease forwards;
    -webkit-animation: animations-keyframes 2s ease forwards;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
@keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}
@-webkit-keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}