css动画播放状态暂停在ios中不起作用[重复]

Question

body.pause * {
animation-play-state:paused !important;
-webkit-animation-play-state:paused !important;
}

当 body 上有一个类“.pause”时，我想暂停所有 css 动画。它在桌面上运行良好，但在 ipad/iphone 中不起作用。我正在ios8上测试。

我注意到的另一件事是，我正在使用步骤动画，上面的“暂停”代码暂停了步骤动画，但完全忽略了变换。

并注意到这个问题只发生在 ios Safari 中。即使是 ios 中的 Chrome 也可以。

Answer 1

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

1. 不要在 GWD (Google Web Designer) 中使用暂停事件
2. 创建调用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", '');
   

   4. 请注意，当移除/暂停动画时，它会回到第 0 帧（00:00 秒），因此您可能需要计算 div 的当前不透明度/位置

   http://jsfiddle.net/duchuy/pczsufL9/