我正在尝试让动画在鼠标悬停时暂停,如下所示:
.quote:nth-child(1):hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
但它不想暂停。有没有人看到我做错了什么?
发布于 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;
}
发布于 2017-05-15 20:35:18
我可以看到,似乎找到了一个解决方案。但是,我提供了另一个简单的解决方案来解决暂停动画和从头重置的问题。
要“暂停”并返回到动画的初始状态,请使用:
<selector>:hover {
animation: step-end;
}
我运行了一个动画,它将字体颜色从深色无限更改为浅色,当我使用“step-end”悬停在它上面时,动画暂停并立即切换到初始的深色,然后在指针移开时恢复。
希望这对其他人有所帮助。:-)
https://stackoverflow.com/questions/20052672
复制相似问题