Css 在Y轴上旋转图元

我设置了一个简单的关键帧动画来旋转Y轴上的一个元素，但它是起伏的，我是否缺少一个属性

.circle{
高度：50px；
宽度：50px；
边界半径：50%；
边框：5px纯黑；
保证金：自动；
动画：旋转1s无限；
}
@-webkit关键帧旋转{
0%{变换：旋转（60度）；}
20%{变换：旋转（120度）；}
40%{变换：旋转（180度）；}
60%{变换：旋转（240度）；}
80%{变换：旋转（300度）；}
100%{变换：旋转（360度）；}
}

由于默认设置（轻松），因此创建了“起伏”效果，您应该将其设置为

线性

另外，将状态指定为20%、40%也没有意义。。。对于关键帧动画，只需使用“to”关键字指定结束状态：

.circle{
高度：50px；
宽度：50px；
边界半径：50%；
边框：5px纯黑；
保证金：自动；
-webkit动画：rotateY 1s无限线性；
动画：rotateY 1s无限线性；
}
@-webkit关键帧旋转{
到{-webkit变换：rotateY（360度）；}
}
@关键帧旋转{
到{变换：旋转（360度）；}
}

---

你的意思是这样吗

.circle{
高度：50px；
宽度：50px；
边界半径：50%；
边框：5px纯黑；
保证金：自动；
动画：旋转1s无限；
动画计时功能：线性；
}
@-webkit关键帧旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}

---

线性工作，但在穿过关键帧后，它似乎旋转不完全。太好了，谢谢！我不知道你可以在关键帧中使用“to”！编辑-SO的代码段似乎不起作用。