animation-fill-mode:forwards 如何让动画保持最后一帧一直循环?

本文主要是介绍animation-fill-mode:forwards 如何让动画保持最后一帧一直循环?，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题是这样的, 当我对一个圆球旋转进行定义时, 圆球执行一个周期的旋转后开始进行反向旋转。无论是否定义forwards 都是这样
在这里插入图片描述
下面就是导致出现问题的错误示例：

@keyframes earthRotate {0% {transform:rotateX(0deg)  rotateY(0deg) rotateX(16deg);}50% {transform:rotateX(0deg)  rotateY(360deg) rotateX(16deg);}100% {transform: rotateX(0deg) rotateY(0deg) rotateX(16deg);}
}
/*这里我直接使用简写方式最后的一个参数就是 animation-fill-mode*/
animation: earthRotate 5s linear infinite forwards;

问题总结：问题的出现并不是forwards 没有执行,而是关键的一点就是在定义动画的最后一帧方面。上面的示例最后一帧定义与第一帧是一样的。原来的理解是旋转会继续循环下去。结果反向回退到第一帧的位置然后继续进行。这样就导致循环旋转动画不能一直保持循环。

在这里插入图片描述
改进后：

@keyframes earthRotate {0% {transform:rotateX(0deg)  rotateY(0deg) rotateX(16deg);}100% {transform:rotateX(0deg)  rotateY(360deg) rotateX(16deg);}
}
animation: earthRotate 5s linear infinite forwards;