Css3 动画跳转到移动设备上的最后一个关键帧，而不进行动画处理

Question

我正在尝试构建烧杯翻倒的简单动画。一切在桌面上都运行良好，但是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 后触发动画(出于显而易见的原因(。任何帮助都会很棒。

Answer 1

事实证明，

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

解决方案是添加类

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

到元素，并在适当的时候用 js 删除该类。感觉有点像黑客，但这是我唯一能找到的在移动设备和桌面上工作的东西。如果有人有更好的建议，我很想听听！