为什么我的animation-fill-mode 设置不生效

Question

.gold_egg_broken{background:url("../img/animation/goldeggBroke.png");width:400px;height:400px;animation:eggbroken3s;-webkit-animation-fill-mode:forwards;-webkit-animation-timing-function:steps(80);}@-webkit-keyframeseggbroken{0%{background-position:00;}90%{background-position:0-32000px;}100%{background-position:0-32000px;}}动态切换给一个元素这个样式想让它停留在最后一帧保持不动。但是不生效

Answer 1

把webkit前缀去掉，修改如下：
.gold_egg_broken{
background:url("../img/animation/goldeggBroke.png");
width:400px;
height:400px;
animation:eggbroken3s;
animation-fill-mode:forwards;
animation-timing-function:steps(80);
}
既然animation属性起作用了，那么也就是说在该浏览器中相关属性不需要前缀了。animation是一个综合属性，默认的animation-fill-mode是none，使用带前缀的属性webkit-animation-fill-mode不能覆盖掉animation-fill-mode，所以需要把前缀去掉。
                            

Answer 2

谢邀，@luckness已经说的很明白。另外就是webkit这类前缀是为了兼容不同浏览器的不同版本的，保守一点的写法可以是：
div{
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-ms-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}