IOS微信webview中 @keyframes中 backgr

原写法:

.loading-img {
    width: 1rem;
    height: 1rem;
    position: absolute;
    left:50%;
        top:50%;
    margin-top:-.5rem;
        margin-left:-.5rem;
    -webkit-animation:loadingImg .2s infinite;
}

@keyframes loadingImg {
    from {
        background: url(loading1.png) no-repeat;
                background-size：cover;
    }
    to {
        background: url(loading2.png) no-repeat;
                background-size：cover;
        }
    }
}

期待效果:可以精准还原设计稿适配安卓与IOS系统。

实际效果

1. 安卓系统可以正常显示
2. IOS系统 background-size 不生效 背景图展示不全

解决办法

.loading-img {
    width: 1rem;
    height: 1rem;
    position: absolute;
    left:50%;
        top:50%;
    margin-top:-.5rem;
        margin-left:-.5rem;
    -webkit-animation:loadingImg .2s infinite;
    background-size: cover;
}

@keyframes loadingImg {
    from {
        background-image: url(../images/loading1.png);
    }
    to {
        background-image: url(../images/loading2.png);
    }

}

问题总结：

1. IOS webview存在兼容问题(具体因为什么还没有查到)，如果效果一定要用CSS写的话可以选择不将background-size写在@keyframes的动画中。
2. 尽量将background的属性都分开写，避免执行动画时覆盖原有样式类。
3. 在网上查阅相关资料时，有网友提出Safari也存在同样问题。