Safari CSS错误：动画旋转方向不正确？ [英] Safari CSS Bug: Animation Rotation Direction Incorrect?

问题描述

我正在为正在进行的项目编写自定义动画。想法是，该动画的目的是要类似于一个感叹号，该感叹号从基线开始不再悬空，摆动一会儿，然后完全脱离基线。

I'm writing a custom animation for a project I'm working on. The idea is that the animation is meant to resemble an exclamation mark becoming unhinged from the baseline, swinging for a moment, and then falling off the baseline entirely.

由于某种原因，只有Safari（OSX和iOS）拒绝将第一个动画关键帧渲染为我制作的CSS动画中的顺时针旋转。而是将关键帧呈现为逆时针动画，但随后的动画关键帧也可以正常工作。

For some reason, only Safari (OSX and iOS) refuses to render the first animation keyframe as a clockwise rotation in a CSS animation I've made. Instead, it renders the keyframe as a counter-clockwise animation, but then works just fine for the following animation keyframes.

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

Working CodePen example: 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规范。

All other browsers render the animation as intended, with the first animation keyframe rotating clockwise. Safari is the only one that applies a counter-clockwise rotation in the initial keyframe. I'm assuming Safari is doing this because the distance to travel the rotation is shorter when going counter-clockwise, but it's not honoring the CSS spec properly if that's the case.

有人知道对此有补救方法吗？

Does anyone know a remedy for this?

推荐答案

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

The problem is that if you try to animate a rotate in safari greater than 180 degrees, it will instead rotate the other way. So if you try to rotate +270 degrees, Safari will animate a rotation of -90 degrees.

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

The workaround for Safari is to never rotate more than 179 in either direction, then complete the rest of the rotation in another segment.

这篇关于Safari CSS错误：动画旋转方向不正确？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！