animation里的forwards到底是什么作用

发布网友发布时间：2022-04-22 08:14

共2个回答

热心网友时间：2022-04-06 14:31

animation里的forwards的作用：forwards是停在动画最后的的那个画面。

详细解释：
设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧。

其他相关定义：
animation-fill-mode
设置动画结束后的状态
none：默认值。不设置对象动画之外的状态，DOM未进行动画前状态
forwards：设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧
backwards：设置对象状态为动画开始时的状态,（测试显示DOM未进行动画前状态）
both：设置对象状态为动画结束或开始的状态，结束时状态优先

热心网友时间：2022-04-06 15:49

animation-fill-mode，定义动画播放时间之外的状态,顾名思义，要么就是在动画播放完了之后给它一个状态 animation-fill-mode : none | forwards | backwards |both; none，播放完之后不改变默认行为，默认值，forwards则是停在动画最后的的那个画面，backwards则是回调到动画最开始出现的画面，both则应用为动画结束或开始的状态。