Css “平滑”；“过渡”；从动画到过渡

我有一个元素，它有一个循环动画，在这个动画中，元素无限地上下反弹。我希望这样，当您将鼠标悬停在元素上时，它会在反弹的峰值处暂停，直到您将鼠标移出元素，此时它将继续其动画

我不能让它这样做。。。我还想确保它能顺利完成

这是一个糟糕的尝试：

---

我不知道在他们玩css的时候有什么方法影响css属性

但真正符合您需求的是设置

动画播放状态

.test:hover {
    animation-play-state: paused;
}

在动画轨迹中停止动画，并在暂停的位置继续

---

我相信一些大师会证明我错了。。。但我不相信这在纯CSS中是可能的。没有CSS事件处理程序可以告诉您动画何时完成，等等。到目前为止，我同意@kthornbloom。可以肯定的是，您必须使用一些JS或jQuery以编程方式在动画中的某些点添加类，才能获得所需的内容。然后你会冒着事情不同步，动画变得不稳定的风险，但这应该是有创意的。

.test:hover {
    animation-play-state: paused;
}