css动画优化

减少动画元素

减少动画元素,是动画性能优化中首先需要完成的。通过审查页面动画 DOM 元素结构,去除不必要的动画元素,减少元素的数量,相应地会减少布页面局和绘制的时间。

尽量使用 fixed、absolute 定位

对于动画元素,尽量使用用 fixed、absolute 定位方式,避免影响到其他节点重排。

尽量只改变transform和opacity

能用 transform、opacity 优先使用,其属性的改变不会发生重排和重绘。如位移操作的,可以使用translate 来实现,渐隐渐现效果可以使用 opacity 属性来实现。

恰当开启硬件加速效果

对动画元素应用transform: translate3d(0, 0, 0)、will-change: transform等来开启硬件加速。通常开启硬件加速可以让动画变得更加流畅。但这里需注意,在不需要的时候需去掉避免过多的内存消耗。

transform: translate3d(0, 0, 0);transform: translateZ(0);will-change: transform;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3动画应用很广,尤其是在H5项目中,炫酷的交互效果可以给产品带来更好的体验,更能吸引用户。然而在应用的时候,...
    UIleader阅读 2,242评论 0 7
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,896评论 0 4
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,337评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,805评论 0 2
  • 最近看到一篇关于GPU动画的神文,原文地址:https://www.smashingmagazine.com/20...
    purple_force阅读 3,491评论 1 6