css3动画 微信浏览器不支持
做了一个图标上下运动的小动画，手机浏览器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);}
}
展开
收起
1
条回答
写回答
写回答
-
IT从业看一下你写的代码，虽然挂了-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);}
}如果还有问题，试着清理一下缓存
2019-07-17 19:33:35赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
