javascript - 為什么我的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;}

}

動態切換給一個元素這個樣式 想讓它停留在最后一幀保持不動。但是不生效

問題解答

把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，所以需要把前綴去掉。

謝邀，@luckness 已經說的很明白。另外就是 webkit 這類前綴是為了兼容不同瀏覽器的不同版本的，保守一點的寫法可以是：

p{ -webkit-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards;}