CSS中的animation-fill-mode属性可以设置以下四种动画填充模式:
none
:默认值。动画执行前和执行后,元素的样式将不会有任何改变。
forwards
:动画执行后,元素会保持动画最后一帧的状态。也就是说,动画结束后,元素不会返回到动画执行前的状态。
backwards
:动画执行前,元素会先应用动画第一帧的样式。也就是说,在动画还没有开始执行之前,元素已经处于动画执行一部分的状态。
both
:结合了forwards和backwards两种填充模式。元素会在动画执行前应用第一帧的样式,在动画执行后保持最后一帧的状态。
动画填充模式指定了元素在动画开始前和结束后的状态,这对于创建动画效果非常重要。