Javascript 如何在svg图标悬停和显示在视图端口时设置其动画？

当鼠标悬停在SVG图标上或它出现在视图端口中时，我尝试设置SVG图标的动画

但在图标出现时设置动画后，当鼠标悬停时，它不会设置动画

有没有简单的解决办法

下面是代码片段。在javascript中，我使用window.addEventListener检查按钮是否可见。当它可见时，一个类被添加到触发动画的div中

在CSS中，有一个类.animateButton，用于为SVG图标的各个组件设置动画。我正在使用路径选择这些组件

：hover用于触发相同的动画，但当前不起作用

window.addEventListener（'scroll'，（）=>{
var buttonTop=button.getBoundingClientRect（）.top；
var buttonIsVisible=（buttonTop-window.innerHeight+25）<0&&buttonTop>0；
//console.log（按钮可见）；
如果（按钮可见）{
如果（！button.classList.contains（“animateButton”））{
//console.log（button.className）；
button.classList.add（“animateButton”）；
}
}否则{
button.className=“”；
}
})

#按钮{
宽度：150px；
背景颜色：绿色；
颜色：白色；
填充：.5rem；
文本对齐：居中；
边缘顶部：500px；
边缘底部：500px；
}
#按钮：悬停路径：第n个子项（1）{
行程：25px；
行程偏移：25px；
动画：动画图标。8秒前缓；
}
#按钮：悬停路径：第n个子项（2）{
行程：25px；
行程偏移：25px；
动画：动画图标。8s向前移动。3s；
}
#按钮：悬停路径：第n个子项（3），#按钮：悬停路径：第n个子项（4）{
行程：7px；
行程偏移：7px；
动画：动画图标。5s向前移动。5s；
}
.animateButton路径：第n个子项（1）{
行程：25px；
行程偏移：25px；
动画：动画图标。8秒前缓；
}
.animateButton路径：第n个子项（2）{
行程：25px；
行程偏移：25px；
动画：动画图标。8s向前移动。3s；
}
.animateButton路径：第n个子项（3），.animateButton路径：第n个子项（4）{
行程：7px；
行程偏移：7px；
动画：动画图标。5s向前移动。5s；
}
@关键帧动画图标{
到{
行程偏移：0px；
}
}

向下滚动查看动画！！
让我停下来！

您可以使用

交叉口观察者

const intersectRatio=.2；
变量选项={
root:null，
rootMargin:'0px'，
阈值：交叉比率
}
var handleIntersect=函数（条目、观察者）{
条目。forEach（（条目）=>{
if（输入。isIntersecting）{
控制台日志（“可视”）
entry.target.classList.add（'animateButton'）；
观察者。未观察者（进入。目标）
}否则
console.log（“不可见”）
});
控制台日志（“句柄”）；
}
var observer=新的IntersectionObserver（handleIntersect，选项）；
document.querySelectorAll（“#按钮”）.forEach（函数（r）{
观察者，观察者（r）；
})

#按钮{
宽度：150px；
背景颜色：绿色；
颜色：白色；
填充：.5rem；
文本对齐：居中；
边缘顶部：500px；
边缘底部：500px；
}
#按钮：悬停路径：第n个子项（1）{
行程：25px；
行程偏移：25px；
动画：动画图标。8秒前缓；
}
#按钮：悬停路径：第n个子项（2）{
行程：25px；
行程偏移：25px；
动画：动画图标。8s向前移动。3s；
}
#按钮：悬停路径：第n个子项（3），
#按钮：悬停路径：第n个子项（4）{
行程：7px；
行程偏移：7px；
动画：动画图标。5s向前移动。5s；
}
.animateButton路径：第n个子项（1）{
行程：25px；
行程偏移：25px；
动画：动画图标。8秒前缓；
}
.animateButton路径：第n个子项（2）{
行程：25px；
行程偏移：25px；
动画：动画图标。8s向前移动。3s；
}
.动画按钮路径：第n个子项（3），
.animateButton路径：第n个子项（4）{
行程：7px；
行程偏移：7px；
动画：动画图标。5s向前移动。5s；
}
@关键帧动画图标{
到{
行程偏移：0px；
}
}

向下滚动查看动画！！
让我停下来！

问题在于css动画