Javascript 如何强制@keyframes在鼠标移出后播放到其结束？

我有一个关键帧动画，当我在元素上悬停时播放。

mouseout

事件后，它会突然停止。我怎么能强迫它玩到最后？我尝试了

打开。（animationend）

事件，它不起作用。转换原点和巨大延迟，两者都不起作用。谢谢

主类{
构造函数（）{
}
韦文（）{
$（this.addClass（'wave-active'）；
}
waveOut（）{
变量元素=$（'.info__块'）；
元素移除类（“波激活”）；
}
jsInit（）{
$（'.info\u block'）。悬停（this.waveOn）；
$（'.info\u block'）。在（'animationend'，this.waveOut）上
}
}
新的Main（）.jsInit（）
.info\u块{
宽度：100px；
高度：100px；
背景：水；
边界半径：50px；
位置：相对位置；
显示器：flex；
证明内容：中心；
边缘顶部：100px；
}
.info\u块：之前{
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
边界半径：50px；
边框顶部：2倍纯水；
}
.info\u块。波浪激活：之前{
动画：链接线2.5s无限。5s线性；
}
@关键帧链接线{
0% {
变换：translateY（0）；
不透明度：1；
}
60% {
不透明度：0；
}
100% {
转换：translateY（-50%）量表（1.6）；
不透明度：0；
}
}

无限动画没有animationend事件。
以下是使用W3C动画规范中描述的本机解决问题的方法。此事件在动画的每次迭代后激发。因此，我们正在做的是，在悬停时，我们将附加
animationiteration
事件侦听器（由于
one
，它将只被触发一次）。在这个事件的侦听器中，我只是简单地放置了原始
waveOut
函数的内容。因此，每次将鼠标悬停在元素外时，动画将完成一次迭代（悬停发生后），然后停止。我认为这比突然结束要优雅得多


主类{
构造函数（）{}
jsInit（）{
$（'.info__block'）。悬停（函数（）{
$（'.info__block'）.off（'animationiteration'）；/*再次快速悬停时关闭事件处理程序*/
$（'.info__block'）.addClass（'wave-active'）；
}，函数（）{
$（'.info__块'）.one（'animationiteration'，function（）{
$（'.info__block'）.removeClass（'wave-active'）；
})
});
}
}
新的Main（）.jsInit（）
正文{
填充：200px 200px；
}
.info\u块{
宽度：100px；
高度：100px；
背景：水；
边界半径：50px；
位置：相对位置；
显示器：flex；
证明内容：中心；
}
.info\u块：之前{
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
边界半径：50px；
边框顶部：2倍纯水；
}
.info\u块。波浪激活：之前{
动画：链接线2.5s无限。5s线性；
}
@关键帧链接线{
0% {
变换：translateY（0）；
不透明度：1；
}
60% {
不透明度：0；
}
100% {
转换：translateY（-50%）量表（1.6）；
不透明度：0；
}
}

看起来像一个傻瓜。对于您的情况，基本上应该忘记
：hover
选择器。使用JS在
mouseover
上触发动画，然后让它运行到最后，不管鼠标是否在元素上。好的，我发现了问题。（a） 你的CodePen CSS不使用
.wave active
类，它使用
：hover
和（b）一个
无限的
动画没有
animationend
。在不同的浏览器中使用diff CSS属性进行动画。例如：IE@keyframes，firefox@-moz-keyframes。你必须为浏览器浏览器提供所有内容，谢谢。事实上，无限没有动画并解决了这个问题@亚历克斯：基于
animationiteration
的答案对你没有帮助吗？这和你想要的不一样吗？