是的,animation-fill-mode属性可以设置动画播放前后元素的样式状态。它适用于在动画播放前或播放完成后需要保留元素最终样式状态的情况,可以在4种可能的值中进行选择:
- none:动画执行完毕后,元素会立即恢复为原来的样式。
- forwards:动画执行完毕后,元素会保持在最终状态。
- backwards:动画开始前,元素会先保持动画的第一帧状态。
- both:等同于使用了forwards和backwards,动画执行完毕后元素会保持在最终状态,并且在动画开始前先保持第一帧状态。
例如,当我们需要让一个按钮在hover时有一个缩放动画,但是当鼠标不在其上面时,按钮需要恢复到原始大小。这种情况下,我们可以使用animation-fill-mode属性来让最终状态保留住。