CSS animation-fill-mode属性
animation-fill-mode属性
CSS中的animation-fill-mode属性，可以指定@keyframes定义的动画在播放之前或之后，其动画效果的可见性。
语法
animationo-direction:modeValue
可选属性值
| 属性值 | 描述 |
|---|---|
| none | 不改变默认行为 |
| forwards | 在动画完成之后，保持最后一个属性值 |
| backwards | 在动画开始之前，应用最开始的属性值 |
| both | 向前以及向后两种填充模式都被应用 |
提示：alternate属性值会在动画播放的奇数次数正常播放，然后在偶数次数向后播放。
animation-fill-mode实例代码，及在线编辑器
<div id='d1'></div><br>
<div id='d2'></div>
<style>
@keyframes widthChange{
from {width:25%;}
to {width:100%;}
}
#d1{
width:25%;
height:80px;
background-color:skyblue;
animation:widthChange 3s;
animation-fill-mode:backwards;
}
#d2{
width:25%;
height:80px;
background-color:orange;
animation:widthChange 3s;
animation-fill-mode:forwards;
}
</style>