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

.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;
}

}

动态切换给一个元素这个样式 想让它停留在最后一帧保持不动。但是不生效

阅读 5.9k
2 个回答

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-modenone,使用带前缀的属性webkit-animation-fill-mode不能覆盖掉animation-fill-mode,所以需要把前缀去掉。

谢邀,
@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;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题