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;

总结： 因为旋转不比移动, 旋转一360就是原点。 所以定义两帧就够, 直接将最后一帧定义在360的位置就可以形成一个完整的循环。而上面的其实是三帧, 第三帧是回退效果所以看起来好像执行了反向运行其实是执行了一个完整的动画。