在 Y 轴上旋转元素

Question

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

Answer 1

"choppy"效果是因为默认animation-timing-function（缓动）而产生的，您应该将其设置为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>

请注意，您还需要根据要支持的浏览器使用供应商前缀。有关详细信息，请参阅 canIuse。

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>

所做的更改是添加一个线性的（而不是简单的）计时功能，并使动画更清楚地说明正在发生的事情。

在 Y 轴上旋转元素

Rotate an element on the Y axis

css

css-animations