css - 在缓出之前重复动画 2 或 3 次

Question

如何在缓和之前重复旋转动画 x 次？

例如 :

#spin-please {
	background: green;
	width: 50px;
	height: 50px;
	animation: spin 3s infinite ease-in-out;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  49% {
    transform: rotate(359deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div id="spin-please">
</div>

我现在的动画根本不是很流畅(正如您在第一次和第二次旋转之间看到的那样)，并且两次旋转之间有一个缓动，我只想要在第一次旋转的开始和结束时第二个(或第三个，如果我选择进行额外的轮换)。

Easing in ==> rotation 1 ==> rotation 2 ==> easing out

这对 CSS 可行吗？

Answer 1

您可以指定多次重复，而不是无限次重复动画:

animation: spin 3s 3 ease-in-out; /* 3secs, repeat 3 times */

有关更多示例，请参阅 animation iteration count。

查看 animation short-hand docs 一次设置所有属性也很有用(就像你的代码一样)

我不确定您要寻找的理想结果是什么，但我修改了动画以显示旋转发生了 3 次(还有一些反向旋转)

#spin-please {
  background: green;
  width: 50px;
  height: 50px;
  /* @keyframes duration | timing-function | delay | 
      iteration-count | direction | fill-mode | play-state | name 
    */
  animation: 1s 3 spin;
  animation-timing-function: ease-in, linear, ease-out;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div id="spin-please">
</div>