手机css3动画不运行的原因是什么?

如题所述

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

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

温馨提示:内容为网友见解,仅供参考
第1个回答  2017-12-29

是css兼容性问题导致的,目前绝大部分移动浏览器还不支持animation这个属性,而是支持-webkit-animation(这类加前缀的)属性。

123.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;所以动画在移动浏览器中就不动了。

可以将代码改为:

1234567.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;}

相似回答