手机上CSS3动画卡顿问题怎么解决

html-css013

手机上CSS3动画卡顿问题怎么解决,第1张

1、在存储卡在长时间的使用中会逐渐造成手机启动速度降低,明因此磁盘整理成为必要。

2、建议用腾讯手机管家清理手机内存,内容包括缓存垃圾、系统垃圾、广告垃圾清理加速,达到优化空间的目的。空间优化了,自然卡顿也会得到改善。

3、做好手机资料备份,重置手机,恢复出厂设置,这一招相当管用、彻底!

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

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

你好,这个问题应该是css兼容性问题导致的。

目前绝大部分移动浏览器还不支持animation这个属性,而是支持-webkit-animation(这类加前缀的)属性,在问题中:

.ih { background: #000 opacity:.3width: 90% height: 25% margin-left:-45% position: absolutebottom: 120pxleft:50%

    animation:ih 2s

}

只设置了,animation: ih 2s而没有写兼容的 -webkit-animation: ih 2s所以动画在移动浏览器中就不动了。你可以试下将上面代码改为:

.ih { background: #000 opacity:.3width: 90% height: 25% margin-left:-45% position: absolutebottom: 120pxleft:50%

    -webkit-animation:ih 2s

    -moz-animation:ih 2s

    -ms-animation:ih 2s

    -o-animation:ih 2s

    animation:ih 2s

}

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