悬停时暂停WebKit动画
悬停时暂停WebKit动画
提问于 2013-11-19 00:23:53
我正在尝试让动画在鼠标悬停时暂停，如下所示：
.quote:nth-child(1):hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}但它不想暂停。有没有人看到我做错了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-11-19 00:43:10
而不是：
.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;
}Stack Overflow用户
发布于 2017-05-15 20:35:18
我可以看到，似乎找到了一个解决方案。但是，我提供了另一个简单的解决方案来解决暂停动画和从头重置的问题。
要“暂停”并返回到动画的初始状态，请使用：
<selector>:hover {
animation: step-end;
}我运行了一个动画，它将字体颜色从深色无限更改为浅色，当我使用“step-end”悬停在它上面时，动画暂停并立即切换到初始的深色，然后在指针移开时恢复。
希望这对其他人有所帮助。:-)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20052672
复制相关文章
相似问题