做了一个图标上下运动的小动画,手机浏览器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);}
}
-webkit-transform
.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);
}
}
这样?
不要给after、before这样的伪类加动画,可以考虑把.renchou-box:after 换成.renchou-box span,记得renchou-box 标签里面加span
加-webkit前缀!另外js里使用”-webkit-transform”! 另外微信里不支持伪类元素做动画!
看一下你写的代码,虽然挂了-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);}
}
如果还有问题,试着清理一下缓存
-webkit-transform
用autoprefixer吧,不然每次手动敲前缀简直要命。