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

I want to pause all css animations when there is a class ".pause" on body. It works fine in desktop but this doesn't work in ipad/iphone. I am testing it on ios8.

Another thing I noticed is, I am using steps animation and the above "pause" code pause the steps animation but completely ignore transform.

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

Jimba Tamang
  • 1,275
  • 15
  • 17

1 Answers1

0

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