开发者社区> 问答> 正文

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

展开
收起
杨冬芳 2016-06-12 11:29:33 4021 0
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
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
微信广告引擎与播放节奏算法实践 立即下载
微信H5视频播放器在海量业务下的实践 立即下载
微信高效运维之路 立即下载