我设置一个简单的 用于在Y轴上旋转元素的关键帧动画 但它很不稳定，我错过了一处房产吗？
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
border: 5px solid black;
margin: auto;
animation: rotateY 1s infinite;
}
@-webkit-keyframes rotateY {
0% { transform: rotateY( 60deg); }
20% { transform: rotateY( 120deg); }
40% { transform: rotateY( 180deg); }
60% { transform: rotateY( 240deg); }
80% { transform: rotateY( 300deg); }
100% { transform: rotateY( 360deg); }
}<div class="circle"></div>
8024
2018-06-02 12:31
起源
答案:
由于默认设置，会创建“不连贯”效果 动画定时功能 （轻松），你应该把它设置为 linear。
对于关键帧动画，在20％，40％...中指定状态也没有意义，您只需使用“to”关键字指定结束状态：
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
border: 5px solid black;
margin: auto;
-webkit-animation: rotateY 1s infinite linear;
animation: rotateY 1s infinite linear;
}
@-webkit-keyframes rotateY {
to { -webkit-transform: rotateY(360deg); }
}
@keyframes rotateY {
to { transform: rotateY(360deg); }
}<div class="circle"></div>请注意，您还需要使用供应商前缀，具体取决于您要支持的浏览器。看到 我可以用吗 了解更多信息。
14
2018-06-02 12:38
完美，谢谢！我不知道你可以在关键帧中使用“to”！编辑 - SO的片段似乎不起作用。 - Mintberry
答案:
由于默认设置，会创建“不连贯”效果 动画定时功能 （轻松），你应该把它设置为 linear。
对于关键帧动画，在20％，40％...中指定状态也没有意义，您只需使用“to”关键字指定结束状态：
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
border: 5px solid black;
margin: auto;
-webkit-animation: rotateY 1s infinite linear;
animation: rotateY 1s infinite linear;
}
@-webkit-keyframes rotateY {
to { -webkit-transform: rotateY(360deg); }
}
@keyframes rotateY {
to { transform: rotateY(360deg); }
}<div class="circle"></div>请注意，您还需要使用供应商前缀，具体取决于您要支持的浏览器。看到 我可以用吗 了解更多信息。
14
2018-06-02 12:38
完美，谢谢！我不知道你可以在关键帧中使用“to”！编辑 - SO的片段似乎不起作用。 - Mintberry
你的意思是这样吗？
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
border: 5px solid black;
margin: auto;
animation: rotateY 1s infinite;
animation-timing-function: linear;
}
@-webkit-keyframes rotateY {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}<div class="circle"></div>这里的变化是添加一个线性（而不是简单）的计时功能，并使动画更清晰一些。
2
2018-06-02 12:38
线性工作，但它在通过关键帧后似乎不完美地旋转。 - Mintberry