最近天天被動畫和音頻折磨~個人比較喜歡用css,所以需求中碰到廣告牌閃爍的需求,果斷使用了css3的動畫,代碼如下:
#ad {
animation: changeAd 1s infinite;
}
@keyframes changeAd {
from {
background: ad1.png no-repeat center center;
background-size: 100% auto;
}
to {
background: ad2.png no-repeat center center;
background-size: 100% auto;
}
}
在瀏覽器測試後,一切ok,然後用ios真機測試,居然發現圖片沒有正常顯示,經過查找,發現是background-size在ios下沒有生效。網上翻找各種資料,都說是ios兼容問題。那一定要用css3寫要怎麼辦呢?於是就開始了各種嘗試,最終測試得出,只要background-size不寫在@keyframes的動畫中就可以了,具體代碼如下:
#ad {
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
animation: changeAd 1s infinite;
}
@keyframes changeAd {
from {
background-image: ad1.png;
}
to {
background-image: ad2.png;
}
}
那這樣是不是說明,background-size在ios其實不存在兼容問題的,那爲什麼第一種寫法background-size就不生效了?具體是什麼原因導致@keyframes中background-size在ios失效還沒有找到原因。