html动画效果结束返回,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               向前和向后填充模式都被应用。

作者：捷搜索

链接：https://www.jianshu.com/p/2614002e7562