animation动画结束后css样式怎么保留最后状态 CSS

shuke 2020-11-24 1491

animation动画结束后css样式怎么保留最后状态
 
问题
css属性animation动画可以轻松地给页面带来很炫很酷的效果,但是有时候我们会遇到这个问题,动画结束后css状态会返回到初始状态,那么这并不是我们想要的,我们希望动画结束后css状态达到最后的模样。

解决方案
为了达到这个效果,可以给个css样式:(animation-fill-mode:forwards)。

animation-fill-mode属性介绍
animation-fill-mode : none | forwards | backwards | both;

值                 描述
none               不改变默认行为。
forwards           当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards          在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both               向前和向后填充模式都被应用。

最新回复 (0)
全部楼主
返回