-webkit-animation-play-state does not work on iOS 8.1 (possibly also lower)

Question

I have an animation running when the page loads, and with javascript I add a class containing

-webkit-animation-play-state:paused; 

Work in OSX safari mode and all other browsers (even PCs) too, but on mobile devices, only on iOS, so that the animation does not seem to be paused when called.

Here's a script about how the state of the animation works and pauses.

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

Try it on iOS, you will see that it is completely ignored.

Answer 1

A workaround for iOS 8-9 Safari that uses -webkit-animation: none! important; instead of -webkit-animation-play-state: pauseed; This approach is for GWD, but may be applied differently.

• Do not use the Pause event in GWD (Google Web Designer)
• Create a normal event that calls the javascript function, set "-webkit-animation: none! Important;" to <div> (you can add / remove css class)

CSS style

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

Javascript

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

3. To resume, delete the CSS class

Javascript

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

4. Please note that when deleting / pausing the animation, it returns to frame 0 (00:00 s), so you may need to calculate the current opacity / position for the div

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