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

＆＃34;波涛汹涌的＆＃34;因默认animation-timing-function（缓动）而创建效果，您应将其设置为linear。

同样没有必要为关键帧动画指定20％，40％......的状态，你可以用＆＃34;到＆＃34;来指定结束状态。关键字：

＆＃13;

.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); }
}

＆＃13;

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

＆＃13;

请注意，您还需要使用供应商前缀，具体取决于您要支持的浏览器。有关详细信息，请参阅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轴上旋转元素

2 个答案: