在缓出之前重复动画 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>

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

缓入 ==> 旋转 1 ==> 旋转 2 ==> 缓出

这对 CSS 可行吗？

Answer 1

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

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

有关更多示例，请参阅动画迭代计数。

查看animation 速记文档以一次设置所有属性也很有用（就像您的代码一样）

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

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

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