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

本文来源于 CSS animation动画之animation-fill-mode特性

问题

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               向前和向后填充模式都被应用。