对动画填充模式属性的理解

在动画等待阶段，none和forwards保持元素的初始状态，而backwards和both保持动画第一帧的状态。

从上图可以看出，动画执行时的状态是一样的。所以区别在于动画等待阶段和动画之后。

动画结束后,“无”和“向后”返回到初始状态，而“向前”和“向后”都保持动画最后一帧的状态。

所以，总结一下动画填充模式的用法:

动画填充模式:控制动画执行前后的状态。

一个动画过程可以分为动画等待、动画执行和动画结束。默认情况下，只有动画执行阶段才会触发@keyframes中声明的动画。

-动画-填充-模式:无；

-默认值。设置动画延迟时(设置延迟的目的是为了区分动画等待阶段的不同)，在动画等待阶段，元素的初始状态被保留，动画结束后，仍然回到元素的初始状态。

-动画-填充-模式:向前；

-设置动画延迟时，元素的初始状态在动画等待阶段保留，最后一帧的状态在动画结束后保留。

-动画-填充-模式:向后；

-设置动画延迟时，第一帧的状态(从或0%)或最后一帧的状态(动画时-方向:反转；)状态。动画结束后，它会返回到元素的初始状态。

-动画-填充-模式:两者都有；

-设置动画延迟时，第一帧的状态(从或0%)或最后一帧的状态(动画时-方向:反转；)状态。动画结束后，保持最后一帧的状态。如你所见，它是向前和向后的结合。

动画填充模式用例: