-webkit-animation-play-state not working on iOS 8.1 (probably lower too)

Question

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.

Answer 1

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

1. Don't use Pause event in GWD (Google Web Designer)
2. 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";

3. To resume, remove CSS class

Javascript

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

4. 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/