问

html5 - css3动画微信浏览器不支持

手机用户2502877953 发布于 2022-11-04 21:12

ios

做了一个图标上下运动的小动画，手机浏览器ios里面都没问题，就是安卓的微信里面看动画就挂掉了

.renchou-box:after{ content: "";position: absolute;z-index: 5;bottom: 1.2rem;left:50%;width:1.5rem;height: 1.2rem;margin-left:-.75rem;background:url(/images/renchou/arrow-down.png) no-repeat;background-size:contain;
    -webkit-animation:arrow .5s linear infinite alternate;   
    animation: arrow .5s linear infinite alternate;
}
@-webkit-keyframes arrow {
    0%{transform: translate(0,-.3rem);}
    100%{transform: translate(0,.3rem);}
}
@keyframes arrow {
    0%{transform: translate(0,-.3rem);}
    100%{transform: translate(0,.3rem);}
}

7 个回答

-webkit-transform

2022-11-12 01:49 回答

Gravitymann
不要给after、before这样的伪类加动画，可以考虑把.renchou-box:after 换成.renchou-box span，记得renchou-box 标签里面加span

2022-11-12 01:49 回答

null5269
加-webkit前缀！另外js里使用”-webkit-transform”! 另外微信里不支持伪类元素做动画！

2022-11-12 01:49 回答

mobiledu2502885307
用autoprefixer吧，不然每次手动敲前缀简直要命。

2022-11-12 01:49 回答

我心飞翔

.renchou-box:after {
    content: "";
    position: absolute;
    z-index: 5;
    bottom: 1.2rem;
    left: 50%;
    width: 1.5rem;
    height: 1.2rem;
    margin-left: -.75rem;
    background: url(/images/renchou/arrow-down.png) no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    -webkit-animation: arrow .5s linear infinite alternate;
    animation: arrow .5s linear infinite alternate;
}

@-webkit-keyframes arrow {
    0% {
        -webkit-transform: translate(0, -.3rem);
        transform: translate(0, -.3rem);
    }
    100% {
        -webkit-transform: translate(0, .3rem);
        transform: translate(0, .3rem);
    }
}

@keyframes arrow {
    0% {
        -webkit-transform: translate(0, -.3rem);
        transform: translate(0, -.3rem);
    }
    100% {
        -webkit-transform: translate(0, .3rem);
        transform: translate(0, .3rem);
    }
}

这样？

2022-11-12 01:49 回答

mobiledu2502905163

-webkit-transform

2022-11-12 01:49 回答

高远PASTOR
看一下你写的代码，虽然挂了-webkit-keyframes，但是里面的transform却没加-webkit
```
@-webkit-keyframes arrow {
0%{transform: translate(0,-.3rem);}
100%{transform: translate(0,.3rem);}
}
```
刚才帮你测试了，加上-webkit动画效果没问题
```
@-webkit-keyframes arrow {
0%{-webkit-transform: translate(0,-.3rem);}
100%{-webkit-transform: translate(0,.3rem);}
}
```
如果还有问题，试着清理一下缓存
2022-11-12 01:49 回答

无味18_380

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签

html5 - css3动画 微信浏览器不支持

html5 - css3动画微信浏览器不支持