CSS 在悬停时暂停 WebKit 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20052672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pause a WebKit animation on hover
提问by user2760221
I'm trying to get an animation to pause on mouse over with the following:
我正在尝试使用以下内容在鼠标悬停时暂停动画：
.quote:nth-child(1):hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
But it does not want to pause. Can anybody see what I'm doing wrong?
但它不想暂停。谁能看到我做错了什么？
回答by tomsullivan1989
Instead of:
代替：
.quote:nth-child(1):hover
{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
use:
用：
.quote-wrapper:hover .quote
{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
回答by JohnnyAce
I can see that a solution appeared to be found. However, I offer another easy solution to the problem of pausing an animation AND resetting to the start.
我可以看到似乎找到了解决方案。但是，我提供了另一个简单的解决方案来解决暂停动画和重置开始的问题。
In order to 'pause' and go back to the initial state of the animation, use:
为了“暂停”并返回动画的初始状态，请使用：
<selector>:hover {
animation: step-end;
}
I had an animation running that was infinitely changing font color from dark to light, and when I hovered over it using 'step-end', the animation paused and instantly switched to the initial dark color, then resumed when the pointer moved away.
我有一个正在运行的动画，它会无限地将字体颜色从深色变为浅色，当我使用“step-end”将鼠标悬停在它上面时，动画暂停并立即切换到初始深色，然后在指针移开时恢复。
Hope this may help others. :-)
希望这可以帮助其他人。:-)
