首页 > 移动平台 > 详细

WEB 移动端 CSS3动画性能 优化

时间:2018-01-23 12:24:26      阅读:276      评论:0      收藏:0      [点我收藏+]

很多时候,我们在开发移动端的时候要使自己的网页兼容不同的机型,很多时候会采用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 代替,提高动画流畅性...

WEB 移动端 CSS3动画性能 优化

原文:https://www.cnblogs.com/zhoubingyan/p/8335028.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!