动画播放状态：在野生动物园11中运行不起作用

Question

首先，元素具有属性animation-play-state: paused，然后脚本将修改为属性animation-play-state: running。所有浏览器都处理该任务，但Safari 11不会启动动画。

有什么问题？我该如何解决这个问题？

Answer 1

我遇到了同样的问题：我的动画最初被暂停，然后通过JS设置为“运行”。这适用于除Safari之外的所有现代浏览器。

我的解决方案是重构/反转已暂停/正在运行的逻辑-我将初始/默认状态保留为“正在运行”，而不是“已暂停”。然后，根据需要添加和删除了“暂停”的类。我不再在CSS的任何位置切换“运行”状态，而仅是处于“已暂停”状态的类。

以下设置现在适用于Safari：

Price

Answer 2

基于calipoop的答案-Safari 8似乎需要完全更改分配的动画（在我的示例中，我使用了'fakename'来欺骗它）。

使用jquery行：$(".animationpaused").removeClass("animationpaused");

使用CSS：

.snowgrid.snowgrid1 {
 -webkit-animation: snowgrid 9s 2 ease-in-out;
 animation: snowgrid 9s 2 ease-in-out;
}
.snowgrid.snowgrid2 {
 -webkit-animation: snowgrid 15s 1 ease-in-out;
 animation: snowgrid 15s 1 ease-in-out;
}
.snowgrid.animationpaused {
 -webkit-animation: fakename 10s 1 ease-in-out;
 animation: fakename 10s 1 ease-in-out;
 -webkit-animation-play-state: paused !important;
 animation-play-state: paused !important;
}

这很可能不允许您在动画上切换播放/暂停，但是如果您只是在等待用户交互以开始动画，则此方法有效。