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

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这样做是因为逆时针旋转的旋转距离更短，但如果是这种情况，它就没有正确遵守CSS规范。

有人知道如何解决这个问题吗？

- Michael Marcialis

Answer 1

问题在于，如果您尝试在Safari中进行大于180度的旋转动画，则会相反地旋转。因此，如果您尝试旋转+270度，Safari将动画旋转-90度。

对于Safari的解决方法是，不要向任何方向旋转超过179度，然后在另一个段完成其余的旋转。

- A. Walding

---

感谢确认。所以这只是Safari没有正确遵守规范。 - Michael Marcialis