Safari CSS Bug:动画旋转方向不正确?

2022-01-16 00:00:00 animation rotation transform css safari

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

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?

推荐答案

问题是，如果您尝试在 safari 中为大于 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.

相关文章