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

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 规范。

有没有人知道对此的补救措施？

Answer 1

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

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