Question

我有动画和指定动画速度的旋转木马：

animation-timing-function: cubic-bezier(.27,.97,.86,1);

@keyframes back-y-spin {
  0%     { transform: rotateY(360deg); }
  100%   { transform: rotateY(0deg); }
}

我想知道如何将它旋转2,3等等，但是将计时功能应用于整个旋转。例如，如果我指定animation-iteration-count: 2; carouser开始，然后变慢，然后停止然后重复 - 更快，更慢，停止。

我想要的是：旋转木马开始，速度增加然后旋转N次然后速度降低并停止。

以下是我使用的示例：https://codepen.io/anon/pen/OgeOEQ

Answer 1

尝试使用transform: rotate(calc(360deg * 3));。示例如下。

.shape {
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  
  animation: rotate 5s;
  animation-timing-function: cubic-bezier(.9,.1,.1,.9);
}

@keyframes rotate {
  0% { transform: rotate(calc(360deg * 6)); }
  100% { transform: rotate(0deg); }
}

<div class="shape"></div>

跨多个迭代的CSS关键帧动画计时功能

1 个答案: