CSS transition动画卡顿的探究

最新推荐文章于 2025-06-08 21:28:47 发布

原创最新推荐文章于 2025-06-08 21:28:47 发布 · 7.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #css #css3

css 专栏收录该内容

2 篇文章

订阅专栏

本文揭示了CSS3动画中transform与height等属性动画卡顿的原因，指出transform由于不涉及布局重排，性能优于后者。建议优先使用transform进行动画设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题

今天在使用css3的transition做动画过渡时，发现动画会卡顿，特此记录我发现卡顿的一些原因和笔记。
先给出结论：
在使用css3 transtion做动画效果时，transform实现的动画是与合成器线程相关的，不需要等待主线程样式计算或者 JS 执行，计算速度是很快的；而使用height，width，margin和padding做动画过渡时，会导致浏览器发生布局和绘制的调整，主线程需要重新计算样式并且执行JS，计算速度自然就慢了。

二、以height为过渡属性时

当一个元素的过渡属性为height：从100px，过渡到200p时，

div {
    height: 100px;
    transition: height 1s linear;
}
 
div:hover {
    height: 200px;
}

主线程和合成线程将按照下面的流程图执行相应的操作。注意在橘黄色方框的操作会比较耗时，在蓝色框中的操作是比较快速的。
（搬运了别人的图片来解释一下~~）
在这里插入图片描述
从图中可以看出，主线程将运行100次（101px => 102px => 103px => …），合成线程将运行100次（101px => 102px => 103px => …）。并且每次主线程运行时，都会经过一次主线程的渲染流程。
主线程的渲染流程，可以参考浏览器渲染网页的流程：

使用 HTML 创建文档对象模型（DOM）
使用 CSS 创建 CSS 对象模型（CSSOM）
基于 DOM 和 CSSOM 执行脚本（Scripts）
合并 DOM 和 CSSOM 形成渲染树（Render Tree）
使用渲染树布局（Layout）所有元素
渲染（Paint）所有元素
也就是说，主线程每次都需要执行Scripts，Render Tree ,Layout和Paint这四个阶段的计算。

三、以transform为过渡属性时

div {
    transform: scale(0.5);
    transition: transform 1s linear;
}
 
div:hover {
    transform: scale(1.0);
}

以transform为过渡属性时，主线程和合成线程将按照下面的流程图执行相应的操作。
在这里插入图片描述
从图中可以看出，主线程将运行1次，合成线程将运行100次。且合成线程的耗时是比主线程的少的。
看到这里，小伙伴们应该能清楚为什么用height、width、margin、padding为过渡属性时，动画有时会卡顿了吧（在性能越差的设备，卡顿越明显）。根据专业人士测量，transform比margin性能好50%~70%
都看到这里了，就请小伙伴们留下你的点赞吧，谢谢给位啦。