很明显这个属性跟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