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

Question

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

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

Answer 1

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

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

现在，以下设置适用于我的 Safari：

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

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