javascript - 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把那个class去掉。感觉有点像 hack，但这是我能找到的唯一可以同时在移动设备和桌面上工作的东西。如果有人有更好的建议，我很乐意听取他们的意见!