在悬停时暂停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

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/

Answer 2

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

为了"暂停"并返回到动画的初始状态,请使用:

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

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

希望这可以帮助别人.:-)