沿Y轴旋转元素

Question

我设置了一个简单的关键帧动画来沿Y轴旋转元素，但是它不流畅，我是否缺少某个属性？

我设置了一个简单的关键帧动画来沿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>  

- user3196599

Answer 1

“颠簸”效果是由于默认的animation-timing-function（ease）创建的，你应该将其设置为linear。

此外，在关键帧动画中指定20％、40％……的状态没有意义，你可以使用“to”关键字直接指定结束状态。

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 5px solid black;
  margin: auto;
  animation: rotateY 1s infinite linear;
}
@keyframes rotateY {
  to { transform: rotateY(360deg); }
}

<div class="circle"></div>

注意，根据您想要支持的浏览器，您还需要使用厂商前缀。更多信息请参考 canIuse。

- web-tiki

---

太好了，谢谢！我不知道你可以在关键帧中使用“to”！编辑 - SO的片段似乎无法工作。 - user3196599

Answer 2

你是不是想让它变成这样？

.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>

这里的更改是添加一个线性的时间函数（而不是缓动），并使动画更清晰，以便了解正在发生什么。

- Rich Bradshaw

---

线性运动正常，但在经过关键帧后似乎会出现不完美的旋转。 - user3196599