亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

為什么我的animation-fill-mode 設置不生效

為什么我的animation-fill-mode 設置不生效

慕碼人8056858 2019-05-25 17:55:30
.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;}}動態切換給一個元素這個樣式想讓它停留在最后一幀保持不動。但是不生效
查看完整描述

2 回答

?
慕碼人2483693

TA貢獻1860條經驗 獲得超9個贊

把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，所以需要把前綴去掉。
查看完整回答
反對 回復 2019-05-25
?
慕妹3146593

TA貢獻1820條經驗 獲得超9個贊

謝邀，@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;
}
查看完整回答
反對 回復 2019-05-25
  • 2 回答
  • 0 關注
  • 1912 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號