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次旋转之间看到），并且在2次旋转之间有一个缓动，我只想在第一次旋转的开始和在第二个结束时（如果我选择进行额外的轮换，则为第三个）。

缓和==＆gt;旋转1 ==＆gt;旋转2 ==＆gt;放宽

CSS可行吗？

Answer 1

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

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

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

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

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

#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>

Answer 2

问题完全不是因为你的animation不顺畅， keyframes的问题，根据此代码

49% {
    transform: rotate(359deg);
  }
  50% {
    transform: rotate(0deg);
  }

您的动画必须在非常短的时间内进行360deg轮换，对于动画不流畅的任何49%值，该值为1％（50% - animation-timing-function之间），试试这段代码：

#spin-please {
	background: green;
	width: 50px;
	height: 50px;
	animation: spin 3s ease infinite;
}

@keyframes spin {
  0% {
    animation-timing-function: ease-out;
    transform: rotate(0deg);
}
50% {
    transform: rotate(180deg);
}
100% {
    animation-timing-function: ease-in;
    transform: rotate(360deg);
}
}

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

请记住，您可以更改关键帧中的animation-timing-function。有关animation-timing-function的详细信息。

Answer 3

#spin-it {
    background: green;
    width: 50px;
    height: 50px;
    animation: spin 1.5s ease infinite;
}

@keyframes spin {
  0% {
    animation-timing-function: ease-out;
    transform: rotate(0deg);
}
25% {transform: rotate(90deg);}
50% {
    transform: rotate(180deg);
}
75% {transform: rotate(270deg);}
100% {
    animation-timing-function: ease-in;
    transform: rotate(360deg);
}
}

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

我的MMJ版本它经历了5个步骤。缓入>>>转到1侧>>>转到1侧>>>转到1侧>>>转到1侧>>>退出

在缓和之前重复动画2或3次

3 个答案: