动画播放状态为“正在运行”但不会播放答案

【问题标题】：animation-play-state is 'running' but won't play动画播放状态为“正在运行”但不会播放
【发布时间】：2018-08-19 03:20:06
【问题描述】：

我目前正在构建一个带有一些 css 动画（非常基本的淡入）的登录页面。我最初在我的 css 文件中设置了animation-play-state: "paused"，后来在滚动页面时使用 jQuery 访问它，以触发动画。

在我的 Mac 上的 Chrome 上运行良好，但尝试从 Safari 和我的 iPhone 上的 Chrome 运行它似乎不起作用。

我检查了控制台日志并尽我所能对其进行了调试，一切似乎都正常，但实际动画没有运行（但是animation-play-state 正在更改为"running"。

最后要补充的是，如果我将 $(".row").css("animation-play-state", "running"); 语句放在 if 语句之前，它会完全按照它应该做的。

我的 jQuery 语句是：

//the position where I want the animation to trigger

var destinations = $('#destinations').offset().top - 300;

//the event listener

if($(window).scrollTop() > destinations) {
        $(".row").css("-webkit-animation-play-state", "running");
        $(".row").css("animation-play-state", "running");
}

有人知道这个问题吗？提前非常感谢！尼夫

【问题讨论】：

Last thing to add, ... --> 你的意思是如果你把它放在 if 它在任何地方都可以工作？
不，我认为他的意思是 if 语句不能正常工作。另外，我没有 iPhone，所以我无法为您提供帮助，只是想我应该指出这一点。
谢谢！实际上 Temani 是对的，它适用于 if 语句之外的任何其他地方。流程进入if语句，双重检查。
没有任何意义。对正在发生的事情的分析肯定是有缺陷的。
我同意，但我无法找出问题所在。最终将初始 CSS animation-play-state 设置为 running，并针对不同的设备宽度进行媒体查询。仍然可以在桌面 Chrome 上顺利运行，但不能在桌面 Safari 上运行......

标签： javascript jquery css jquery-ui css-animations

【解决方案1】：

今天遇到了这个问题。我一直在更改animation-play-state，以创建漂亮的显示动画。

还定义了animation-fill-mode: both;。

我使用了这样的关键帧

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

在 Safari 中似乎没有任何帮助。我的测试版本是11.1.2 (13605.3.8)（目前稳定）和Safari Technology Preview Release 63（Safari 12.1，WebKit 13607.1.2.1），在Macbook上和 iPhone 一样 - 结果是一样的，没有动画播放。

TL.DR。您不能简单地在 Safari 中更改 animation-play-state。尝试更改animation-name 属性

我很幸运能够使用 opacity 和 transform 来显示元素，所以这个 hacky 时间动画名称帮助了我：

@keyframes be-hidden { from { opacity: 0; } to { opacity: 0.0000001; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } div { animation-name: be-hidden; animation-duration: 600ms; animation-fill-mode: both; animation-delay: 500ms; animation-iteration-count: 1; } div.revealed { animation-name: fade; }

将animation-name 设置为一些临时动画，它将隐藏元素，然后将其更改为其他（.revealed 类）

如果有其他方法可以解决此问题，我将很高兴看到它。

【讨论】：