在鼠标悬停时暂停WebKit动画

Question

我正在尝试使用以下代码实现当鼠标悬停时暂停动画：

.quote:nth-child(1):hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

但它不想暂停。有人能看到我做错了什么吗？

JSFIDDLE

- user2760221

Answer 1

改为：

.quote:nth-child(1):hover 
{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

使用:

.quote-wrapper:hover .quote 
{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

演示: http://jsfiddle.net/j4Abq/2/

- tomsullivan1989

---

谢谢Tom。这几乎完美地解决了问题。我发现的问题是，如果在悬停/暂停之前不让每个引用循环，似乎会破坏动画效果。我尝试过移动悬停命令（碰运气），但没有帮助。有什么想法吗？ - user2760221

这将只是暂停动画在任何状态，我不确定你能做什么来改变它。也许尝试作为一个新问题问一下？祝好运。 - tomsullivan1989

谢谢Tom！看起来问题已经解决了。 - user2760221

你还应该在IE8和IE9中使用以下代码： -ms-animation-play-state: "paused"; - ES112

我适应了这个答案，起初它在任何浏览器中都无法工作。（我试图在许多单独的元素上使用JavaScript应用.paused样式。在我的情况下，我只需要在每行末尾添加!important即可。由于人们可能会将您的答案用于类似的目的，因此您可以将其添加到您的答案中，以使其比评论更突出。 animation-play-state: paused !important; - Regular Jo

Answer 2

我可以看到似乎已经找到了一种解决方案。但是，我提供另一个简单的解决方案来解决暂停动画并返回到初始状态的问题。

为了“暂停”并返回动画的初始状态，请使用以下代码：

<selector>:hover {
    animation: step-end;
}

我有一个动画一直在无限地改变字体颜色，从深色到浅色。当我使用“step-end”悬停在上面时，动画暂停并立即切换回初始的深色，然后当指针移开后恢复播放。希望这可以帮助其他人。 :-)

- JohnnyAce