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 向前和向后填充模式都被应用。
小礼物走一走,来简书关注我