2

我有一个为无限循环嵌套 CSS 动画的想法，其中每个循环的持续时间是不同的素数，因此累积效果是一个很好的非重复动画（将鼠标悬停在带有 webkit 浏览器的徽标上以获得想法：http:// jsbin.com/usabop/2）

问题是当 :hover 状态结束时，一切都会立即跳回原始状态。

有没有人有任何想法或建议可以使过渡更顺利？

4

1 回答 1

2

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

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

于 2012-12-13T03:13:01.183 回答