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

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;
}

DEMO ：http://jsfiddle.net/j4Abq/2/

Answer 2

我可以看到似乎找到了一个解决方案。但是，我提供了另一个简单的解决方案来解决暂停动画和重置到开始的问题。

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

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

我有一个动画运行，从黑暗到光线无限地改变字体颜色，当我使用“步骤结束”盘旋它时，动画暂停并立即切换到初始深色，然后当指针移动时恢复程。

希望这可以帮助别人。： - ）

在悬停时暂停WebKit动画

2 个答案: