css动画不动,手机上的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;

}

希望能帮你解决问题，望采纳~~

辅助答案

用户：qq963663242

2018年05月30日

可能是源代码问题，可以查看源代码，代码不多的，用手机和电脑浏览，注意那个充电头的动画。

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模式的标识。

用户：2306776537@qq.com

2018年05月20日

这个animation是个典型的css3属性了，最大的问题就是受限浏览器，比如ie10之前的浏览器就不会有效果，又因为win7之类的系统最高的ie版本是ie9，又升级不了，所以css3想完整显示只能用win10系统。似乎跟你所说的没关系。。其实问题就在这里，可能是你的安卓系统不支持，简单看了下你的代码，就是个简单的位移，没有具体测试，还有就是透明度怎么都是0，这个css3属性不行，这类简单效果，用其他属性代替就是了。你上下移动就用height，控制高度由大到小，反之，这是直线的上下效果，斜着走的话，就配合点JS来控制高度宽度的移动量，就行了，没必要吊在这个anma属性这吧·