webkit-animation-play-state 在 chrome 上不起作用答案

【问题标题】：webkit-animation-play-state doesn`t work on chromewebkit-animation-play-state 在 chrome 上不起作用
【发布时间】：2014-04-16 14:36:06
【问题描述】：

昨天我写了关于旋转圆圈的堆栈问题。我得到了解决方案的答案，但我想重写代码以处理 :hover。这是主要问题。它在 chrome 上不起作用，但在 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/

【问题讨论】：

定义“不起作用”？

标签： html css

【解决方案1】：

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

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

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

【讨论】：

试过这个。不适合我。 Chrome 版本 97.0.4692.71。 2022 年。
@Garavani Version 97.0.4692.71 (Build officiel) (64 bits) 适用于我，所以 Version 97.0.4692.99 (Build officiel) (64 bits) 。没有显示的是操作不再在线共享的图像；）
感谢您的关注，Cyrillus！我不确定我是否理解您所说的“操作”是什么意思。然而，当我的代码在 Safari 和 Firefox 上运行良好时，我必须在使用 jQuery 准备好的文档上添加“暂停”状态，以使其与 Chrome 一起使用。（在 CSS 中放置在动画后面并没有起到作用）。但是，也许这仅与我的代码有关。你的小提琴似乎工作正常。
@Garavani 感谢您的反馈。现在对我来说听起来更清楚了，我很惊讶和困惑，它现在不起作用，请参阅english.stackexchange.com/questions/424366/… ;) 而且，是的，答案将在稍后重新定义动画播放状态值

【解决方案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

【讨论】：

【解决方案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;
}

【讨论】：