Question

我正在为我正在进行的项目编写自定义动画。这个想法是动画的意思是类似于感叹号从基线开始变形，摆动片刻，然后完全从基线上掉下来。

出于某种原因，只有Safari（OSX和iOS）拒绝在我制作的CSS动画中将第一个动画关键帧渲染为顺时针旋转。相反，它将关键帧渲染为逆时针动画，但对于以下动画关键帧可以正常工作。

工作CodePen示例：http://codepen.io/michaelmarcialis/pen/obPYPO

@keyframes unhinged {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(240deg);
  }
  30% {
    transform: rotate(125deg);
  }
  45% {
    transform: rotate(220deg);
  }
  60% {
    transform: rotate(145deg);
  }
  75% {
    opacity: 1;
    transform: rotate(200deg);
  }
  90% {
    opacity: 0;
    transform: translate(-0.5rem, 8.57142857142857rem) rotate(215deg);
  }
  95% {
    opacity: 0;
    transform: translate(0) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

所有其他浏览器按预期渲染动画，第一个动画关键帧顺时针旋转。 Safari是唯一一个在初始关键帧中应用逆时针旋转的Safari。我假设Safari正在这样做，因为逆时针方向行进旋转的距离较短，但如果是这样的话，它就不能正确地遵守CSS规范。

有人知道这方面的补救措施吗？

Answer 1

问题在于，如果您尝试在大于180度的safari中设置旋转动画，它将改为以另一种方式旋转。因此，如果您尝试旋转+270度，Safari将为-90度的旋转设置动画。

Safari的解决方法是永远不要在任一方向上旋转超过179，然后在另一个段中完成剩余的旋转。

Safari CSS Bug：动画旋转方向不正确？

1 个答案: