Css3 animation jumps to last keyframe on mobile without animating

Question

I am trying to build a simple animation of a beaker tipping over. Everything is working great on desktop, but both iOS Safari and chrome, when the animation starts it jumps immediately to the last key frame (100%). So this tells me the animation is firing, but for some reason it just doesn't want to well... animate.

Here is my scss code. I have an auto-prefixer, I've checked and double checked, it doesn't seem to be anything to do with -webkit. Any help would be awesome!!

/** Our Process Area Edits **/
&.our-process-title {
  #our-process-svg {
    width: rem-calc(150);
    height: rem-calc(150);
    margin: 50px auto;
    transform: translateZ(0);
    animation-name: beakerShake;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: paused;

    &.running {
      animation-play-state: running;
    }

    @-webkit-keyframes beakerShake {
      0% { -webkit-transform: rotateZ(0deg);}
      5% { -webkit-transform: rotateZ(20deg); }
      15% { -webkit-transform: rotateZ(-25deg); }
      20% { -webkit-transform: rotateZ(0deg);}
      40% { -webkit-transform: rotateZ(0deg);}
      50% { -webkit-transform: rotateZ(5deg); }
      55% { -webkit-transform: rotateZ(-10deg); }
      58% { -webkit-transform: rotateZ(15deg); }
      60% { -webkit-transform: rotateZ(0deg);}
      65% { -webkit-transform: rotateZ(0deg);}
      72% { -webkit-transform: rotateZ(30deg); }
      78% { -webkit-transform: rotateZ(-35deg); }
      85% { -webkit-transform: rotateZ(0deg);}
      95% { -webkit-transform: rotateZ(0deg);}
      100% { -webkit-transform: rotateZ(105deg);}
    }

    @keyframes beakerShake {
      0% { transform: rotateZ(0deg);}
      5% { transform: rotateZ(20deg); }
      15% { transform: rotateZ(-25deg); }
      20% { transform: rotateZ(0deg);}
      40% { transform: rotateZ(0deg);}
      50% { transform: rotateZ(5deg); }
      55% { transform: rotateZ(-10deg); }
      58% { transform: rotateZ(15deg); }
      60% { transform: rotateZ(0deg);}
      65% { transform: rotateZ(0deg);}
      72% { transform: rotateZ(30deg); }
      78% { transform: rotateZ(-35deg); }
      85% { transform: rotateZ(0deg);}
      95% { transform: rotateZ(0deg);}
      100% { transform: rotateZ(105deg);}
    }

EDIT:

After trying one last thing, of course I found the culprit. I am drawing this particular svg's path, and then when it's done drawing, changing the animation play state to running. Here is my js :

setTimeout(function(){
  svg.style.animationPlayState = svg.style.WebkitAnimationPlayState = 'running';
}, 4500);

Once i removed that functionality it all worked fine. I really need this the animation to fire after the svg is drawn (for obvious reasons). Any help would be awesome.

Answer 1

Turns out this is an issue with how iOS and the mobile broswers handle the animation play state... Essentially they don't.

The solution was to add the class

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

to the element, and remove that class with js when the time is right. Feels kind of like a hack, but its the only thing I could find to work on both mobile and desktop. If anyone has better suggestions, I'd love to hear them!