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

答案:2 悬赏:50 手机版

解决时间 2021-11-08 03:06

提问者网友：难遇难求
2021-11-07 02:49

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

最佳答案

五星知识达人网友：举杯邀酒敬孤独
2021-11-07 04:19

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

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楼网友：山君与见山
2021-11-07 05:45

是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;}

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息