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删除该类。感觉有点像黑客，但它是我唯一可以找到在移动和桌面上工作的东西。如果有人有更好的建议，我很乐意听到他们的意见！

Css3动画在没有动画的情况下跳转到移动设备上的最后一个关键帧

1 个答案: