Question

我想制作一个无限时间运行的动画，但是当它完成一次运行时它不会返回其原始状态。把它想象成一个太阳动画。这是一个示例项目

＆＃13;

.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)}
}

＆＃13;

<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"/>

＆＃13;

一旦完成每次运行，它就会恢复到原始状态。我不想要它。任何人都可以帮我解决这个问题吗？

Answer 1

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

另外，你表示＆＃34;替代＆＃34;作为动画方法，这意味着它将从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"/>

希望有所帮助

如何在无限时间运行时阻止动画返回原始状态？

1 个答案: