<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/7.jpg); 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; 而没有写兼容的 -webkit-animation: ih 2s;所以动画在移动浏览器中就不动了。你可以试下将上面代码改为:
希望能帮你解决问题,望采纳~~
可能是源代码问题,可以查看源代码,代码不多的,用手机和电脑浏览,注意那个充电头的动画。
1、最好加上浏览器兼容前缀 你的代码transition: all 5s linear 1s; ,如果你是用在webkit内核的浏览器,最好这样写:
-webkit-transition: all 5s linear 1s;
transition: all 5s linear 1s;
2、魅族note2上UC,火狐,chrome,魅族自带浏览器均有动画。只有手机Opera没有动画。可以试一下加上针对不同浏览器的css前缀补全。或者在meta里加上浏览器打开h5模式的标识。
本回答被网友采纳