7

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.

Warface
  • 5,029
  • 9
  • 56
  • 82
  • Can confirm. `paused` seems to be completely ignored and `running` restarts the animation. Great. – fregante Dec 23 '14 at 01:41
  • In my case, I have "pause" class on my body with :paused state on document load which is fine. It paused all animation. When I remove that "pause" class all animation starts to play but if I put back that "pause" class it doesn't effect any more. One thing I noticed that it pause the steps animation but not others. – Jimba Tamang Dec 23 '14 at 23:34
  • i put my answer here http://stackoverflow.com/questions/27683012/css-animation-play-state-paused-doesnt-work-in-ios/33250632#33250632 – duchuy Oct 21 '15 at 04:09
  • @duchuy probably should put it here too so I could accept it ;) – Warface Oct 21 '15 at 13:55
  • Did you find any solution, yet? I have the exact same question, BUT the stated workaround below is not what I was looking for! – dazlious Feb 09 '18 at 15:05

1 Answers1

4

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";
  1. To resume, remove CSS class

Javascript

div.className = div.className.replace("no-animation", '');
  1. 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/

duchuy
  • 604
  • 5
  • 9