Safari CSS Bug:动画旋转方向不正确？
Safari CSS Bug:动画旋转方向不正确？
提问于 2016-02-03 20:12:17
我正在为我正在做的一个项目编写一个定制动画。这个想法是，动画就像一个惊叹号，从基线开始失控，摇动一会儿，然后完全从基线上掉下来。
出于某种原因，只有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
Stack Overflow用户
回答已采纳
发布于 2017-02-02 19:25:31
问题是，如果你试图动画旋转大于180度的野生动物，它将相反地旋转。因此，如果你尝试旋转+270度，Safari将动画的旋转-90度。
Safari的解决办法是在任何一个方向旋转超过179次，然后在另一段完成其余的旋转。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35186768
复制相关文章
相似问题
腾讯云开发者
