动画播放状态：运行在 Safari 11 中不起作用答案

【问题标题】：Animation-play-state: running dosen't work in safari 11动画播放状态：运行在 Safari 11 中不起作用
【发布时间】：2018-03-30 01:36:34
【问题描述】：

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

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

【问题讨论】：

根据MDN，您需要属性上的-webkit 前缀才能在Safari 中工作
我在使用 Safari 时遇到了同样的问题。此外，Safari 似乎不再需要 -webkit- 前缀，因此之前的评论似乎不正确/已过时。
@calipoop 你找出原因或解决办法了吗？
@EricJohnson - 我会发布我的修复作为答案

标签： jquery css html safari frontend

【解决方案1】：

基于 calipoop 的回答——Safari 8 似乎需要完全更改分配的动画（在我的示例中，我使用了“假名”来欺骗它）。

使用 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;
}

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

【讨论】：

【解决方案2】：

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

我的解决方案是重构/反转暂停/运行逻辑 - 我将初始/默认状态保留为“正在运行”，而不是“暂停”。然后我根据需要添加并删除了我的“暂停”课程。我不再在我的 css 中的任何地方切换“运行”状态，只有一个具有“暂停”状态的类。

以下设置现在适用于 Safari：

.fancyEl {
  animation: fancyAni ease-in-out 1.5s infinite;
}

.fancyEl.paused {
  animation-play-state: paused;
}

【讨论】：