html - 如何防止动画在无限次运行时返回到原始状态？

Question

我想制作一个运行无限次但在运行完成后不返回其原始状态的动画。把它想象成太阳移动的动画。这是一个示例元素

.animator3{
	-webkit-animation-name:j3;
	-webkit-animation-delay:0s;
	-webkit-animation-direction:alternate;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-fill-mode: forwards;
	transform:translateX();
}
@-webkit-keyframes j3{
		0% {transform: rotate(30deg)}
		
		100% {transform: rotate(150deg)}
}	

<img src="https://i.hizliresim.com/9m7y5Z.png" style="box-shadow:0 10px 20px rgb(2%,5%,5%); border-radius:50%;" width="255" height="255" id="planet" class="animator3"/>

每次运行完成后，它会恢复到原来的状态。我不想要它。谁能帮我解决这个问题？

Answer 1

如果你想让它运行无限次，你必须设置一个与初始状态匹配的最终状态。

另外，您将“交替”指定为动画方法，这意味着它将从 A 到 B，然后从 B 到 A 并重复。 默认选项将从 A 转到 B，然后从 A 重新启动到 B。

我还添加了 -webkit-animation-timing-function: linear; 以获得没有加速和减速效果的动画。

<style>
.animator3 {
    -webkit-animation-name:j3;
    -webkit-animation-delay:0s;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    transform:translateX();
}
 @-webkit-keyframes j3{
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}
</style>

<img src="https://i.hizliresim.com/9m7y5Z.png" style="box-shadow:0 10px 20px rgb(2%,5%,5%); border-radius:50%;" width="255" height="255" id="planet" class="animator3"/>

希望对你有帮助