                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /H5+JS+CSS3 实现圣诞情缘

animation里的forwards到底是什么作用呢

这里的forwards到底是什么作用呢？（-moz-animation:effectOut 8s ease-in-out forwards;）

我发现如果不要这个forwards，第二张图出现后，第三张图就会自动又出现？

鸣人与路飞

2016-01-07

源自：H5+JS+CSS3 实现圣诞情缘 4-2

关注问题我要回答

26918

操作

收起

4 回答

米修沫回答被采纳 +3 积分
2016-01-07

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

参考https://www.qianduan.net/css3-animation/

3 回复有任何疑惑可以回复我~

#1

鸣人与路飞提问者

非常感谢！

2016-01-07 回复有任何疑惑可以回复我~

红薯123
2017-11-10

animation-fill-mode属性值：

none: 默认值，播放完动画后，画面停在起始位置

forwards: 播放完动画，停在animation定义的最后一帧

backwards: 如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值。

both，应该懂了

0 回复有任何疑惑可以回复我~

echo_kinchao
2016-01-07

看你结束完是停留还是回去

0 回复有任何疑惑可以回复我~

伊望岁月
2016-01-07

forwards属于animation-fill-mode属性的值，意思是当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

你这里去掉了，就不会保持，所以自动出现第三张图

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

H5+JS+CSS3 实现圣诞情缘

参与学习 122015 人
解答问题 211 个

为圣诞节准备的H5+JS+CSS特效案例教程，实现静与动的结合

本课相似问答

1 回答steps(2) animation里没有看到这个吧？

1 回答这个js是有什么作用呢

4 回答position: absolute;的做用是什么呢

2 回答observer里面 function one()是做什么的？不太懂，什么情况会用到？

2 回答很多东西都忘了啊，为什么人会这样，学习到底有什么意义呢

搜索更多本课相关问答

animation里的forwards到底是什么作用呢

我要回答关注问题

意见反馈帮助中心 APP下载