Javascript 当CSS动画进入视口时触发它

我试图在Bootstrap4圆形图像周围创建一个边框。我希望它像下面的代码笔示例中的边框一样动画，但我希望它在用户向下滚动时加载。据我所知，我需要使用Javascript来触发它，但我不确定如何才能做到这一点。有人能帮我吗

---

当动画在开始之前、结束之后或两者都未播放时，“动画填充模式”属性指定元素的样式。CSS动画在播放第一个关键帧之前或最后一个关键帧之后不会影响元素。

您可以使用

window.onscroll = function(e) {
    // Scroll up or down
}

动画在以下情况下显示：

&:hover{
    animation: border .4s ease 1 forwards;
    cursor: none;
    [...]

因此，您需要将所有CSS添加到新id中，并在检测到滚动时使用JavaScript将其添加到元素中：

.newClass{
    animation: border .4s ease 1 forwards;
    cursor: none;
    [...]

加上：

var element = document.getElementById("element-id");
element.className += " newClass";

---

您可以使用新的交点观察者api 如果可以在此处使用polyfill：

代码如下所示：

let options = {
root: document.querySelector('.wrap'),
rootMargin: '0px',
threshold: 1.0
}
let element = document.querySelector('.circle')
let observer = new IntersectionObserver(() => element.classList.add('onviewport') , options);

您还应该修改css，使其不监听悬停触发器，而是响应类： 修改

&:hover{

到

如果您不想使用Intersection observer api，您可以使用像这样的插件，逻辑仍然是类似的

&:hover{

&.onviewport {