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

Posted 2023-03-06

【中文标题】Safari CSS Bug：动画旋转方向不正确？

【英文标题】：Safari CSS Bug: Animation Rotation Direction Incorrect?

【发布时间】：2016-05-13 05:22:05

【问题描述】：

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

由于某种原因，只有 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 规范。

有谁知道解决这个问题的方法吗？

【参考方案1】：

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

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

【讨论】：

感谢您的确认。所以这只是 Safari 没有正确遵守规范。