该方法适用于所有品牌的电脑。
具体问题:
手机上的css3动画为什么不动?
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/7.jpg-600); background-size: cover; height: 909px; background-position: 50% 50%;"> <p class="wz">商城承诺符合以下情况,自客户收到商品之日起7日内可以无理由退货,15日内因质量问题可以换货,客户可在线提交返修申请办理退换货事宜。具体退换货标准如下</p> <div class="ih"></div> </div> 以下是css3: .ih { background: #000; opacity:.3;width: 90%; height: 25%; margin-left:-45%; position: absolute;bottom: 120px;left:50%; animation:ih 2s; } @-webkit-keyframes ih { 0% {opacity: 0;-webkit-transform: translate(-40px,0px);} 100% {opacity: 0;-webkit-transform: translate(0px,0px);} } @-moz-keyframes ih { 0% {opacity: 0;-moz-transform: translate(-40px,0px);} 100% {opacity: 0;-moz-transform: translate(0px,0px);} } @-ms-keyframes ih { 0% {opacity: 0;-ms-transform: translate(-40px,0px);} 100% {opacity: 0;-ms-transform: translate(0px,0px);} } @-o-keyframes ih { 0% {opacity: 0;-o-transform: translate(-40px,10px);} 100% {opacity: 0;-o-transform: translate(0px,0px);} } @keyframes ih { 0% {opacity: 0;transform: translate(-40px,0px);} 100% {opacity: 0;transform: translate(0px,0px);} }
解决办法:
这个问题应该是css兼容性问题导致的。
目前绝大部分移动浏览器还不支持animation这个属性,而是支持-webkit-animation(这类加前缀的)属性,在问题中:
.ih { background: #000; opacity:.3;width: 90%; height: 25%; margin-left:-45%; position: absolute;bottom: 120px;left:50%; animation:ih 2s; }
只设置了,animation: ih 2s; 而没有写兼容的 -webkit-animation: ih 2s;所以动画在移动浏览器中就不动了。你可以试下将上面代码改为:
.ih { background: #000; opacity:.3;width: 90%; height: 25%; margin-left:-45%; position: absolute;bottom: 120px;left:50%; -webkit-animation:ih 2s; -moz-animation:ih 2s; -ms-animation:ih 2s; -o-animation:ih 2s; animation:ih 2s; }
以上就是css animation不动怎么办的详细内容,更多请关注0133技术站其它相关文章!