CSS3 的动画（animation）和过渡（transition）属性在性能优化上的区别？哪些属性会引起重排（reflow）和重绘（repaint）？

原创于 2025-06-08 21:28:47 发布 · 1.3k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #性能优化 #前端

大白话前端八股专栏收录该内容

730 篇文章

订阅专栏

大白话 CSS3 的动画（animation）和过渡（transition）属性在性能优化上的区别？哪些属性会引起重排（reflow）和重绘（repaint）？

前端小伙伴们，有没有遇到过这种情况？给按钮加了个hover过渡效果，结果鼠标滑过就卡成PPT；做个轮播图动画，手机上直接掉帧到15fps……今天咱们就聊聊CSS3的"动画双兄弟"——transition（过渡）和animation（关键帧动画），用最接地气的话讲清它们的性能区别，看完这篇，你不仅能写出流畅的动画，还能和面试官唠明白背后的优化逻辑～

一、问题场景：动画卡顿的"罪魁祸首"

先讲个我上周踩的坑：给客户做电商首页，设计稿要求按钮悬停时背景色渐变+宽度拉伸。我用transition实现，结果测试时发现：

鼠标快速滑过按钮，动画时断时续；
打开Chrome DevTools的Performance面板一看，Layout（重排）的耗时占了30%！

后来改成用transform属性做动画，并把元素提升到合成层，卡顿问题瞬间消失。这说明：动画的性能好坏，和用transition还是animation关系不大，关键是看触发了浏览器的哪些渲染阶段。

二、技术原理：浏览器渲染的"三兄弟"——重排、重绘、合成

要搞懂动画性能，得先明白浏览器是怎么把CSS变成屏幕上的图像的。渲染流程主要分三步：

1. 重排（Reflow/Layout）：重新计算布局

当元素的几何属性（如宽高、位置、边距）改变时，浏览器需要重新计算所有受影响元素的位置和大小。这是最耗时的步骤，因为要遍历整个DOM树。
触发重排的常见属性：width、height、margin、padding、top、left、border、display、position等。

2. 重绘（Repaint）：重新绘制颜色

当元素的视觉属性（如颜色、背景、阴影）改变，但不影响布局时，浏览器会重新绘制这些元素的颜色。重绘比重大排轻，但仍需遍历受影响的元素。
触发重绘的常见属性：color、background-color、box-shadow、opacity、visibility等。

3. 合成（Composite）：直接GPU加速

当元素的合成属性（如transform、opacity）改变时，浏览器会跳过重排和重绘，直接通过GPU合成新的图像。这是最高效的方式，几乎不影响主线程。
触发合成的常见属性：transform（平移/旋转/缩放）、opacity（透明度）、filter（滤镜，部分场景）等。

三、transition vs animation：性能差异的核心

transition和animation本质上都是在改变CSS属性，但它们的触发方式和控制复杂度会影响最终的性能表现。

1. transition（过渡）：被动触发的"小短动画"

transition是事件驱动的（如hover、click），只在属性变化时触发一次，适合简单的状态切换（如按钮悬停、折叠面板展开）。
性能特点：

通常只触发一次完整的动画流程（从from到to）；
若过渡的属性触发重排/重绘，每次变化都会触发对应的渲染步骤；
适合短时间、低频率的动画（如0.3秒的按钮悬停效果）。

2. animation（关键帧动画）：主动循环的"长动画"

animation是主动运行的（通过@keyframes定义多个帧），可以设置循环次数（infinite），适合复杂的持续动画（如加载 Loading、轮播图切换）。
性能特点：

会持续触发属性变化（如每秒60次）；
若动画属性触发重排/重绘，会导致每帧都执行重排/重绘，性能消耗指数级上升；
适合需要精细控制、长时间运行的动画（如5秒的加载进度条）。

四、代码示例：从卡到流畅的实战对比

示例1：用transition做按钮悬停（重排版）

/* 按钮样式：过渡width和background-color */
.button {
  width: 100px;
  height: 40px;
  background-color: #4285f4;
  transition: width 0.3s, background-color 0.3s; /* 过渡两个属性 */
}

.button:hover {
  width: 150px; /* 改变width（触发重排） */
  background-color: #0f9d58; /* 改变background-color（触发重绘） */
}

性能问题：悬停时width变化触发重排，background-color变化触发重绘，导致每帧都要执行布局和绘制，手机端容易卡顿。

示例2：用transition优化（合成版）

/* 优化：用transform替代width，opacity替代background-color */
.button-optimized {
  width: 100px;
  height: 40px;
  background-color: #4285f4;
  /* 过渡transform和opacity（触发合成） */
  transition: transform 0.3s, opacity 0.3s;
  /* 提升到合成层（关键优化！） */
  will-change: transform; 
}

.button-optimized:hover {
  transform: scaleX(1.5); /* 缩放替代宽度变化（合成属性） */
  opacity: 0.9; /* 透明度替代背景色变化（合成属性） */
}

优化效果：transform和opacity触发合成，GPU直接处理，动画流畅到60fps！

示例3：用animation做加载动画（重绘版）

/* 加载圈：用border-color变化（触发重绘） */
.loading {
  width: 40px;
  height: 40px;
  border: 4px solid #eee;
  border-top-color: #4285f4;
  animation: spin 1s linear infinite; /* 无限旋转 */
}

@keyframes spin {
  from { transform: rotate(0deg); } /* 旋转是合成属性 */
  to { transform: rotate(360deg); }
}

性能分析：虽然transform是合成属性，但如果同时修改border-color（重绘属性），会导致每帧都触发重绘。但上面的代码只修改transform，所以是流畅的。

示例4：用animation做复杂动画（重排版）

/* 错误示例：用margin做平移动画（触发重排） */
.box {
  width: 50px;
  height: 50px;
  background: #4285f4;
  animation: move 2s infinite;
}

@keyframes move {
  from { margin-left: 0; } /* margin触发重排 */
  to { margin-left: 300px; }
}

性能问题：margin-left变化触发重排，每帧都要重新计算布局，动画卡顿明显。

五、transition与animation的性能差异表

对比项	transition（过渡）	animation（关键帧动画）
触发方式	事件驱动（如hover/click）	主动运行（通过@keyframes定义）
控制复杂度	简单（仅from→to）	复杂（多关键帧、循环、延迟）
性能消耗	低（短时间、单次触发）	高（长时间、多帧触发）
常见卡顿原因	过渡属性触发重排/重绘	动画属性触发重排/重绘
优化优先级	优先替换为合成属性	必须替换为合成属性
适用场景	短时间状态切换（按钮悬停、折叠）	长时间持续动画（加载Loading、轮播）

六、面试题回答方法

正常回答（结构化）：

“CSS3的transition和animation在性能优化上的核心区别在于：

触发机制：transition是事件驱动的短动画，animation是主动运行的长动画；
性能消耗：animation因持续运行，若属性触发重排/重绘，性能消耗更高；
优化重点：两者都应避免触发重排/重绘，优先使用transform、opacity等合成属性，并通过will-change或translateZ(0)提升合成层。
重排（Reflow）由几何属性（如宽高、边距）触发，重绘（Repaint）由视觉属性（如颜色、阴影）触发，合成（Composite）由transform、opacity等属性触发，合成层的动画性能最佳。”

大白话回答（接地气）：

“transition就像小区门口的道闸——车来就抬杆（事件触发），抬完就落（单次动画），性能压力小。但要是道闸的杆子用‘伸缩宽度’实现（触发重排），抬杆就会卡；要是改成‘旋转杆子’（transform合成），就丝滑多了。
animation像商场的旋转门——一直转（循环动画），要是旋转门的‘门页宽度’不断变（触发重排），转起来就卡成PPT；要是改成‘门页旋转’（transform合成），就能一直流畅转。
重排是‘挪位置’（改宽高边距），最费性能；重绘是‘改颜色’（改背景阴影），其次；合成是‘直接GPU画图’（改旋转透明度），最省性能。”

七、总结：3个优化原则+2个避坑指南

3个优化原则：

优先使用合成属性：动画属性尽量用transform（平移/旋转/缩放）和opacity（透明度），触发GPU合成；
避免重排属性：绝对不用width、height、margin、padding等几何属性做动画；
提升合成层：对持续动画的元素，用will-change: transform或transform: translateZ(0)提升到合成层，避免频繁重排/重绘。

2个避坑指南：

别用transition做长动画：transition适合短时间的状态切换（如0.3秒的悬停），长时间动画（如5秒的加载）用animation更可控；
别让animation触发重排：@keyframes中绝对不要修改width、left等几何属性，否则每帧都会触发重排，卡顿到怀疑人生。

八、扩展思考：4个高频问题解答

问题1：哪些CSS属性会触发重排？

解答：触发重排的属性都是影响元素布局的几何属性，常见的有：
width、height、margin、padding、top、left、right、bottom、border、display、position（static除外）、overflow、font-size、text-align等。

问题2：哪些属性触发重绘但不重排？

解答：不影响布局但改变外观的属性，常见的有：
color、background-color、background-image、box-shadow、text-shadow、opacity（未提升合成层时）、visibility、outline等。

3. 如何检测动画是否触发重排/重绘？

解答：用Chrome DevTools的Performance和Rendering面板：

打开Rendering面板，勾选Paint flashing（重绘高亮）和Layout shift regions（重排高亮）；
运行动画，页面中闪烁的黄色区域是重绘，蓝色区域是重排；
打开Performance面板录制动画，查看Layout和Paint的耗时，耗时越长性能越差。

4. CSS变量（–var）对动画性能有影响吗？

解答：有！CSS变量在transition或animation中使用时，若变量值变化，会触发属性重新计算。如果变量用于重排/重绘属性，会导致性能下降。
优化建议：尽量用CSS变量控制合成属性（如--rotate用于transform: rotate(var(--rotate))），避免用于重排/重绘属性。