CSS中的animation-fill-mode属性

很明显这个属性跟animation动画相关的一个属性，用来控制动画的起始和结束状态的属性。

比如我们设置如下动画：

div{
   width: 100px;
    height: 100px;
    background-color: red;
    margin: 0 auto;
    animation: myBgColor 2.5s ease;
    animation-delay: 1s;
}

@keyframes myBgColor{
    0%{
        background-color: green;
    }
    100%{
        background-color: blue;
    }
}

效果如下，动画延迟1秒开始执行，结束状态为蓝色。

如果我们想让动画结束后保持在结束状态，即保持蓝色状态可以设置animation-fill-mode为forwards;

animation-fill-mode: forwards;

效果：

比较难理解的是backwards属性值，定义为：

在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
即在动画执行前设置元素的初始状态为动画的第一个关键帧状态。

效果：

最后一个属性值both，即同时设置forwards和backwards

参考：http://www.w3cplus.com/css3/understanding-css-animation-fill-mode-property.html