关于一些css属性在微信上不兼容的解决方法

    最近在搞一个微信端的项目，在电脑测试就可以，但是放在微信端就出现不兼容的问题。比如css动画，背景图片显示不完全。一开始不懂，就上网就百度，找到了解放方法。所以在这里跟大家分享一下。希望对各位有用。

1.关于css动画解决方法

关键帧：

@keyframes run{0%{bottom: -300px;}50%{bottom: -150px;}100%{bottom: 0px;}} @-webkit-keyframes run{ 0%{bottom: -300px;}50%{bottom: -150px;}100%{bottom: 0px;} } @-moz-keyframes run{ 0%{bottom: -300px;}50%{bottom: -150px;}100%{bottom: 0px;} } @-o-keyframes run{ 0%{bottom: -300px;}50%{bottom: -150px;}100%{bottom: 0px;} } @-ms-keyframes run{ 0%{bottom: -300px;}50%{bottom: -150px;}100%{bottom: 0px;} }

动画：

animation: run 1s linear;-webkit-animation: run 1s linear;-moz-animation: run 1s linear; -o-animation: run 1s linear; -ms-animation:run 1s linear;-webkit-transition:all 1s linear;-moz-transition:all 1s linear;-ms-transition:all 1s linear;-o-transition:all 1s linear; 

transition: all 1s linear;animation-fill-mode: forwards;-webkit-animation-fill-mode:forwards;

-moz-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;-o-animation-fill-mode:forwards; 

一定要记住在微信端上一定要加-webkit-前缀

 背景高度问题

解放方法：就是你给个固定的高度，因为你宽度给的是100%，所以也不怕会变形之类的。

我解决的方法是这样子，不知道小伙伴们有没有更好的办法，可以说说哦，呵呵呵。