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;}
}
動態切換給一個元素這個樣式 想讓它停留在最后一幀保持不動。但是不生效
問題解答
回答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,所以需要把前綴去掉。
回答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;}
相關文章:
1. javascript - 關于apply()與call()的問題2. java - 在用戶不登錄的情況下,用戶如何添加保存到購物車?3. javascript - nginx反向代理靜態資源403錯誤?4. java - spring boot 如何打包成asp.net core 那種獨立應用?5. docker網絡端口映射,沒有方便點的操作方法么?6. 安全性測試 - nodejs中如何防mySQL注入7. docker - 各位電腦上有多少個容器啊?容器一多,自己都搞混了,咋辦呢?8. 推薦好用mysql管理工具?for mac和pc9. Mysql 組合索引最左原則的疑惑10. javascript - 如何將函數計算出的內容傳遞為變量
