javascript - 為什麼我的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-fillmode前綴去掉。

Answer 2

謝邀，
@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;
}