-webkit-animation-play-state 在 iOS 8.1 上不起作用（也可能更低）答案

【问题标题】：-webkit-animation-play-state not working on iOS 8.1 (probably lower too)-webkit-animation-play-state 在 iOS 8.1 上不起作用（也可能更低）
【发布时间】：2015-02-06 08:35:09
【问题描述】：

我在页面加载时运行了一个动画，并使用 javascript 添加了一个包含

的类

-webkit-animation-play-state:paused;

在 OSX safari 和所有其他浏览器（甚至 PC）上也能正常工作，但在移动设备上，只有在 iOS 上调用时动画似乎没有暂停。

这里有一个关于动画状态如何运行和暂停的问题。

http://jsfiddle.net/uc9c5/2/

在 iOS 上试试，你会发现它完全被忽略了。

【问题讨论】：

可以确认。 paused 似乎被完全忽略，running 重新启动动画。太好了。
就我而言，我的身体上有“暂停”类，文件加载时的 :paused 状态很好。它暂停了所有动画。当我删除那个“暂停”类时，所有动画都开始播放，但是如果我放回那个“暂停”类，它就不再起作用了。一件事我注意到它会暂停步骤动画，但不会暂停其他动画。
我把我的答案放在这里stackoverflow.com/questions/27683012/…
@duchuy 可能也应该把它放在这里，这样我才能接受它；）
您找到解决方案了吗？我有完全相同的问题，但下面所述的解决方法不是我想要的！

标签： ios css-animations

【解决方案1】：

使用 -webkit-animation: none !important; 而不是 -webkit-animation-play-state:paused; 的 iOS 8-9 Safari 解决方法此方法适用于 GWD，但也可以应用其他方式

不要在 GWD (Google Web Designer) 中使用暂停事件
创建调用javascript函数的普通事件，设置“-webkit-animation: none !important;”到
（您可以添加/删除 css 类）
CSS 样式
```
.no-animation {
  -webkit-animation: none !important;
}
```
Javascript
```
div.className = div.className + " no-animation";
```
1. 要恢复，请删除 CSS 类
Javascript
```
div.className = div.className.replace("no-animation", '');
```
1. 请注意，当移除/暂停动画时，它会回到第 0 帧（00:00 秒），因此您可能需要计算 div 的当前不透明度/位置
http://jsfiddle.net/duchuy/pczsufL9/

【讨论】：