html5 - css3动画微信浏览器不支持-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

迷茫 2017-04-17 13:05:45

[HTML讨论组]

616

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

巴扎黑2017-04-17 13:07:45 7楼

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

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

赞 +0

添加回复

PHP中文网2017-04-17 13:07:45 6楼

-webkit-transform

赞 +0

添加回复

PHPz2017-04-17 13:07:45 5楼

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

这样？

赞 +0

添加回复