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

Question

.gold_egg_broken{

background: url("../img/animation/goldeggBroke.png");

width: 400px;

height: 400px;

animation: eggbroken 3s;

-webkit-animation-fill-mode:forwards;

-webkit-animation-timing-function: steps(80);

}

@-webkit-keyframes eggbroken {

0%{

    background-position: 0 0;

}

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: eggbroken 3s;    animation-fill-mode:forwards;    animation-timing-function: steps(80);}既然animation属性起作用了，那么也就是说在该浏览器中相关属性不需要前缀了。animation是一个综合属性，默认的animation-fill-mode是none，使用带前缀的属性webkit-animation-fill-mode不能覆盖掉animation-fill-mode，所以需要把前缀去掉。