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删除该类。 感觉有点像黑客，但我发现它在移动设备和台式机上都可以工作。 如果有人有更好的建议，我很想听听他们的建议！