webkit

I have an animation running on page load and with javascript I add a class containing the

-webkit-animation-play-state:paused;

Working fine on OSX safari and all other browsers (even PC) too but on mobile, only on iOS that the animation doesn't seem to paused when called.

Here's a fiddle on how the animation state is running and paused.

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

Try it on iOS, you'll see that it's totally ignored.

---

Workaround approach for iOS 8-9 Safari that use -webkit-animation: none !important; instead of -webkit-animation-play-state:paused; This approach is for GWD, but can apply otherwise

Don't use Pause event in GWD (Google Web Designer)

Create normal event that calls a javascript function, set "-webkit-animation: none !important;" to the <div> (you can add/remove css class)

CSS Style

.no-animation {
  -webkit-animation: none !important;
}

Javascript

div.className = div.className + " no-animation";

To resume, remove CSS class

Javascript

div.className = div.className.replace("no-animation", '');

Please note that when remove/pause animation, it will go back to frame 0 (00:00 s), so you may need to calculate the current opacity/position for the div

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

链接地址: http://www.djcxy.com/p/23760.html

上一篇: 将自定义UIView与自动布局添加到iCarousel

下一篇: WebKit的