Css animation-play-state paused, not working in ios

Question

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

I want to pause all css animations when there is a ".pause" class on the body. It works fine on the desktop, but it does not work on ipad / iphone. I am testing it on ios8.

Another thing I noticed is the use of step animation, and the pause code above pauses the step animation, but completely ignores the conversion.

And I noticed that this problem occurred only in iOS Safari. Even Chrome on ios is fine.

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/