这里的forwards到底是什么作用呢?(-moz-animation:effectOut 8s ease-in-out forwards;)
我发现如果不要这个forwards,第二张图出现后,第三张图就会自动又出现?
animation-fill-mode,定义动画播放时间之外的状态,顾名思义,要么就是在动画播放完了之后给它一个状态 animation-fill-mode : none | forwards | backwards |both; none,播放完之后不改变默认行为,默认值,forwards则是停在动画最后的的那个画面,backwards则是回调到动画最开始出现的画面,both则应用为动画结束或开始的状态,
参考https://www.qianduan.net/css3-animation/
animation-fill-mode属性值:
none: 默认值,播放完动画后,画面停在起始位置
forwards: 播放完动画,停在animation定义的最后一帧
backwards: 如果设置了animation-delay,在开始到delay这段时间,画面停在第一帧。如果没有设置delay,画面是元素设置的初始值。
both,应该懂了
看你结束完是停留还是 回去
forwards属于animation-fill-mode属性的值,意思是当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
你这里去掉了,就不会保持,所以自动出现第三张图