css3动画 微信浏览器不支持

Question

做了一个图标上下运动的小动画，手机浏览器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);}
}

Answer 1

看一下你写的代码，虽然挂了-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);}
}

如果还有问题，试着清理一下缓存

Answer 2

-webkit-transform

Answer 3

.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);
    }
}

这样？

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

-webkit-transform