平滑结束从由hover触发的CSS动画过渡

Question

我有一个想法，就是为无限循环嵌套CSS动画，其中每个循环的持续时间是不同的素数，因此累积效果是一个很好的非重复动画（使用webkit浏览器将鼠标悬停在徽标上：{ {3}}）

问题在于：当悬停状态结束时，一切都会立即跳回到原始状态。

有没有人有任何想法或建议让这个转变更顺畅？

Answer 1

不幸的是，通过CSS动画的工作方式，没有简单的方法可以做到这一点。您可以使用animation-play-state属性，但这样只会在您不再悬停时将动画冻结在当前帧中。

我的建议是使用JavaScript在悬停时添加一个类，然后触发动画的一个完整周期。