Question

如何在开始时暂停文档中的所有CSS动画？我希望在开始时有一个包含css动画的所有元素的类，即：'。paused'。然后，使用jQuery在我的js中回调，删除类'.paused'，然后添加一个类来恢复播放，即：'。runing'。

这就是我所拥有的：

HTML：

<li class="firstanimation paused">...</li>
<li class="secondanimation paused">...</li>
<li class="thirdanimation paused">...</li>

CSS：

#slider li.paused {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}
#slider li.firstanimation {
    animation: cycle 25s linear infinite;-moz-animation:cycle 25s linear infinite;-webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
    animation: cycletwo 25s linear infinite;-moz-animation:cycletwo 25s linear infinite;-webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
    animation: cyclethree 25s linear infinite;-moz-animation:cyclethree 25s linear infinite;-webkit-animation:cyclethree 25s linear infinite;
}

所以，我的问题是“#slider li.paused”选择器不起作用。在Chrome中，检查员说'动画播放状态：已暂停;'是无效的属性值......？我不明白，因为我的css中也有这个，它运行正常：

#slider:hover li, #slider:hover .progress-bar {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

所以再说一次，基本上简单来说，我如何用一个类来定位所有动画以使它们全部暂停？ According to W3 docs，动画播放状态：暂停; “适用于：所有元素，:: before和::之后的伪元素。”但它不是我的情况。我有什么不对？

非常感谢您的帮助。

日Thnx！

Answer 1

您的问题是由选择器特异性引起的。由于.paused和li.elemclass具有相同的特异性，编译器将始终选择最后一个

要解决此问题，您可以将.paused属性移到其他属性之后，或者通过添加其他图层来使其具有更多优先级，例如body #slider li.paused

Check the docs了解有关特异性的更多信息，here's a specificity calculator以方便您使用

如何暂停所有CSS动画？

1 个答案: