最近天天被动画和音频折磨~个人比较喜欢用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失效还没有找到原因。