WEB 移动端 CSS3动画性能 优化

很多时候,我们在开发移动端的时候要使自己的网页兼容不同的机型,很多时候会采用CSS3动画,但是很多时候在安卓机下,动画明显会出现卡顿,很难看,那么这里我介绍几个CSS 属性进行硬件加速那么就会得到明显的效果:

opacity: 1;

-webkit-backface-visibility: hidden;

-webkit-transform:translate3d(0,0,0);

这三个属性选其中一个放在要使用动画的元素中即可,很多时候你使用了-webkit-transform: 这个属性做了其它值,那么你就不能用这个了,选其它两个吧。

还有一些优化方面的就是少用 高消耗的属性 css shadowbackground-attachment: fixed 等这些属性,并且如果使用了left top 定位,那么最好使用 -webkit-transform:translateX ,-webkit-transform:translateY 代替,提高动画流畅性...