animation动画不生效_css animation不动怎么办

fbb175b3f790b23df6c53275821f1d31.png

具体问题:

手机上的css3动画为什么不动?

商城承诺符合以下情况,自客户收到商品之日起7日内可以无理由退货,15日内因质量问题可以换货,客户可在线提交返修申请办理退换货事宜。具体退换货标准如下

以下是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;

}


版权声明:本文为weixin_30941215原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。