Javascript Css3动画跳到移动设备上的最后一个关键帧，无需设置动画

我试图建立一个烧杯倾倒的简单动画。桌面上的一切都很好，但iOS Safari和chrome在动画开始时会立即跳到最后一个关键帧（100%）。所以这告诉我动画正在启动，但出于某种原因，它只是不想很好地。。。制作动画

这是我的scss代码。我有一个自动前缀器，我检查了又检查了一遍，它似乎与-webkit没有任何关系。任何帮助都会很棒

/** 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);}
    }

编辑：

在尝试了最后一件事之后，我当然找到了罪犯。我正在绘制这个特定svg的路径，然后在绘制完成后，将动画播放状态更改为运行。这是我的js：

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

---

一旦我删除了这个功能，一切都很好。我真的需要在绘制svg后启动动画（出于明显的原因）。任何帮助都会很棒

这是iOS和移动浏览器如何处理动画播放状态的问题。。。基本上他们没有

解决方案是添加类

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

---

并在适当的时候用js删除该类。感觉有点像黑客，但这是我唯一能在手机和桌面上找到的东西。如果有人有更好的建议，我很乐意听听

实际上，我认为由于SVG尚未绘制而导致的重新绘制会使浏览器跳过当前的动画播放。因此，您可能希望让它先渲染（也称为显示）SVG，然后对其设置动画。这就是setTimeout所做的，因为它会等待一点，但这不是一个“干净”的解决方案。那么，在SVG完成后插入css动画属性，而不是将其播放状态设置为running呢？