Question

昨天我写了关于旋转圈的堆栈问题。我得到了解决方案的答案，但我想重写代码来处理：悬停。这是主要问题。它不适用于铬，但它在mozilla下工作得很完美。（通过不工作，我的意思是它一直在旋转。我需要它在悬停时旋转）

代码：

HTML

<div class="loading">
    <div class="circle-small"></div>
    <div class="circle-medium"></div>
    <div class="circle-big"></div>
</div>

CSS http://jsfiddle.net/EPy52/3/

Answer 1

您应该在调用animation-play-state后调用animation，否则规则似乎会被覆盖。

稍后在工作表中调用它会看到规则有效。

http://jsfiddle.net/EPy52/5/

Answer 2

这似乎是Chrome中的一个错误：-webkit-animation-play-state not working in Chrome

如果可能，您应该暂停一下Javascript，如http://www.browsersupport.net/test-cases/CSS/CSS_Test%3A_-webkit-animation-play-state%3Apaused

Answer 3

我得到了它，我认为这是你的CSS中的特殊性问题。尝试使用：

div.circle-medium, div.circle-small {
    -webkit-animation-play-state:paused; /* Safari and Chrome */
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state:paused;
}

webkit-animation-play-state对chrome不起作用

3 个答案: