嘿，大家好！今天咱们聊聊 CSS 动画里那些“风骚”的家伙，以及那些“默默无闻”但其实很重要的幕后英雄。咱们的主题是 transform 和 opacity 这两个动画属性的性能优势，以及那些非合成属性的性能成本。准备好了吗？系好安全带，咱们要开始飙车了！
开场：CSS 动画的江湖
想象一下，CSS 动画就像一个武林江湖，各种属性就像不同的武林高手，有的擅长轻功（transform），身手敏捷，飘逸潇洒；有的擅长隐身术（opacity），来无影去无踪；而有的则擅长重型武器（比如改变 width、height、top、left），威力巨大，但移动起来却笨重迟缓。
咱们的目标是找到那些既能打又能跑，性能又好的“武林高手”，用他们来打造流畅丝滑的动画效果。
第一章：transform 变形记：性能之王
transform 属性，绝对是 CSS 动画界的性能之王。它主要负责元素的变形，包括平移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）。 为什么它这么厉害呢？
秘密在于“合成层”（Compositing Layers）。
1.1 合成层是个啥？
简单来说，合成层就是浏览器为了优化渲染而创建的独立图层。每个合成层都有自己的纹理（Texture），GPU 可以直接对这些纹理进行操作，而不需要重新绘制整个页面。
transform 动画通常能够触发“硬件加速”，也就是把动画交给 GPU 来处理。GPU 处理图像的速度比 CPU 快得多，而且不会阻塞主线程，从而避免了动画卡顿。
1.2 transform 的优势：
- 硬件加速： 动画在 GPU 上执行，速度更快，更流畅。
- 独立性： 动画在一个独立的合成层上进行，不会影响其他元素的渲染。
- 避免重绘（Repaint）和重排（Reflow）： 这是
transform最大的优势。咱们稍后会详细解释。
1.3 代码实战：让元素飞起来！
咱们来写一个简单的 transform 动画，让一个 div 元素平移到屏幕右侧。
<div class="box">我是一个盒子</div>.box {
width: 100px;
height: 100px;
background-color: lightblue;
position: absolute; /* Important for transform animations */
left: 0;
top: 0;
transition: transform 1s ease-in-out;
}
.box:hover {
transform: translateX(500px); /* 平移 500 像素 */
}这段代码的意思是，当鼠标悬停在 .box 元素上时，它会以 1 秒的速度平移到右侧 500 像素的位置。
1.4 进阶技巧：3D 变形
transform 不仅可以进行 2D 变形，还可以进行 3D 变形。3D 变形需要使用 translate3d、rotate3d 和 scale3d 等函数。
.box:hover {
transform: rotateX(45deg) rotateY(45deg) translateZ(100px);
}这段代码会让盒子沿着 X 轴和 Y 轴旋转 45 度，并且在 Z 轴上平移 100 像素，产生一种立体的效果。
第二章：opacity 透明术：低调的性能优化大师
opacity 属性用于控制元素的透明度，它的值介于 0（完全透明）和 1（完全不透明）之间。
2.1 opacity 的优势：
- 硬件加速： 和
transform一样，opacity动画通常也能触发硬件加速。 - 避免重绘（Repaint）和重排（Reflow）： 同样是避免性能损耗的关键。
2.2 代码实战：让元素淡入淡出
咱们来写一个简单的 opacity 动画，让一个 div 元素淡入淡出。
<div class="box">我是一个盒子</div>.box {
width: 100px;
height: 100px;
background-color: lightgreen;
opacity: 1; /* 初始状态完全不透明 */
transition: opacity 1s ease-in-out;
}
.box:hover {
opacity: 0.5; /* 悬停时半透明 */
}这段代码的意思是，当鼠标悬停在 .box 元素上时，它的透明度会从 1 逐渐变为 0.5。
第三章：重绘（Repaint）和重排（Reflow）：性能杀手
现在，咱们来聊聊重绘（Repaint）和重排（Reflow）这两个性能杀手。理解它们，才能更好地理解 transform 和 opacity 的优势。
3.1 重绘（Repaint）：
当元素的样式发生改变，但没有改变其在文档流中的位置时，浏览器会重新绘制该元素。比如，改变元素的 background-color、color、opacity 等属性就会触发重绘。
重绘的成本相对较低，因为它只需要重新绘制受影响的元素，而不需要重新计算整个页面的布局。
3.2 重排（Reflow）：
当元素的尺寸、位置或可见性发生改变时，或者当页面结构发生改变时，浏览器需要重新计算整个页面的布局。这个过程就是重排。
重排的成本非常高，因为它会影响到整个页面，导致浏览器需要重新计算所有元素的尺寸和位置。
3.3 为什么 transform 和 opacity 能避免重绘和重排？
因为 transform 和 opacity 动画通常在独立的合成层上进行，它们不会影响其他元素的布局和绘制。这意味着，当 transform 或 opacity 的值发生改变时，浏览器只需要重新绘制该合成层，而不需要重新计算整个页面的布局，从而避免了重排。
3.4 代码对比：transform vs. left
咱们来做一个对比，分别使用 transform 和 left 属性来实现元素的平移动画，看看它们的性能差异。
使用 transform：
<div class="box transform-box">Transform</div>.transform-box {
width: 100px;
height: 100px;
background-color: lightcoral;
position: absolute;
left: 0;
top: 0;
transition: transform 1s ease-in-out;
}
.transform-box:hover {
transform: translateX(500px);
}使用 left：
<div class="box left-box">Left</div>.left-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
position: absolute;
left: 0;
top: 150px; /* 避免和 transform-box 重叠 */
transition: left 1s ease-in-out;
}
.left-box:hover {
left: 500px;
}打开浏览器的开发者工具，选择 Performance 面板，录制一段时间的动画，然后分析结果。你会发现，使用 transform 的动画性能明显优于使用 left 的动画。这是因为 left 属性的改变会导致重排，而 transform 则不会。
3.5 避免触发重排的属性列表
以下是一些常见的会导致重排的 CSS 属性：
| 属性 | 描述 |
|---|---|
width |
元素宽度 |
height |
元素高度 |
margin |
元素外边距 |
padding |
元素内边距 |
border |
元素边框 |
position |
元素定位方式（static、relative、absolute、fixed、sticky） |
top |
元素顶部位置 |
left |
元素左侧位置 |
right |
元素右侧位置 |
bottom |
元素底部位置 |
display |
元素显示方式（none、block、inline、inline-block 等） |
float |
元素浮动方式 |
font-size |
字体大小 |
font-weight |
字体粗细 |
text-align |
文本对齐方式 |
overflow |
内容溢出处理方式 |
第四章：合成层：幕后英雄
咱们再深入了解一下合成层。
4.1 如何创建合成层？
浏览器会自动创建一些合成层，但咱们也可以手动创建合成层，以优化动画性能。以下是一些常见的创建合成层的方法：
- 使用
transform或opacity： 这是最简单的方法。 - 使用
<video>或<iframe>标签： 这些标签会自动创建合成层。 - 使用
will-change属性： 这个属性可以提前告诉浏览器，元素即将发生改变，从而让浏览器提前创建合成层。例如：will-change: transform; - 使用 3D
transform： 例如transform: translateZ(0);或者transform: rotateZ(0);(这个hack利用了3D transforms 经常会触发合成层)
4.2 will-change 属性的注意事项：
will-change 属性虽然强大，但也要谨慎使用。过度使用 will-change 可能会导致浏览器创建过多的合成层，从而增加内存占用，甚至降低性能。
- 不要滥用： 只在需要的时候使用
will-change。 - 及时移除： 当动画结束后，及时移除
will-change属性。
4.3 查看合成层：
在 Chrome 开发者工具中，选择 Layers 面板，可以查看页面中的所有合成层。
第五章：实战案例：打造流畅的滚动动画
现在，咱们来做一个实战案例，使用 transform 和 opacity 来打造一个流畅的滚动动画。
需求：
当页面滚动到某个位置时，让一个导航栏固定在顶部，并逐渐显示出来。
代码：
<!DOCTYPE html>
<html>
<head>
<title>流畅的滚动动画</title>
<style>
body {
height: 2000px; /* 为了产生滚动效果 */
margin: 0;
font-family: sans-serif;
}
.navbar {
position: absolute;
top: 200px; /* 初始位置 */
left: 0;
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
text-align: center;
line-height: 50px;
transform: translateY(-100%); /* 初始状态隐藏在顶部 */
opacity: 0; /* 初始状态完全透明 */
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.navbar.fixed {
position: fixed;
top: 0;
transform: translateY(0); /* 固定在顶部 */
opacity: 1; /* 完全不透明 */
}
</style>
</head>
<body>
<div class="content">
<h1>滚动页面</h1>
<p>向下滚动以查看导航栏效果。</p>
</div>
<div class="navbar">
我是导航栏
</div>
<script>
const navbar = document.querySelector('.navbar');
const scrollThreshold = 200; // 滚动超过 200 像素时触发动画
window.addEventListener('scroll', () => {
if (window.scrollY > scrollThreshold) {
navbar.classList.add('fixed');
} else {
navbar.classList.remove('fixed');
}
});
</script>
</body>
</html>分析：
navbar初始状态使用transform: translateY(-100%)将其隐藏在顶部，并使用opacity: 0将其设置为完全透明。- 当页面滚动超过
scrollThreshold时，给navbar添加fixed类，使其固定在顶部，并逐渐显示出来。 - 使用
transition来创建平滑的动画效果。
优化：
- 可以添加
will-change: transform, opacity;到.navbar中，提前告诉浏览器，transform和opacity属性即将发生改变，从而让浏览器提前创建合成层。
第六章：总结与建议
咱们今天聊了很多关于 CSS 动画性能的内容，现在来总结一下：
transform和opacity是 CSS 动画中的性能之王。 它们能够触发硬件加速，避免重绘和重排，从而创建流畅丝滑的动画效果。- 尽量避免使用会导致重排的 CSS 属性。 比如
width、height、top、left等。 - 合理使用
will-change属性。 不要滥用，只在需要的时候使用，并在动画结束后及时移除。 - 使用 Chrome 开发者工具来分析动画性能。 找到性能瓶颈，并进行优化。
- 多做实验，多积累经验。 只有通过实践，才能真正掌握 CSS 动画的性能优化技巧。
建议：
在开发 CSS 动画时，优先考虑使用 transform 和 opacity 属性。如果需要改变元素的位置或尺寸，尽量使用 transform 来代替 top、left、width 和 height 等属性。
记住，性能优化是一个持续的过程，需要不断地学习和实践。希望今天的分享对大家有所帮助！
结束语：
好了，今天的讲座就到这里。希望大家以后在写 CSS 动画的时候，能够更加注重性能，打造出更加流畅、更加丝滑的用户体验。谢谢大家！如果觉得讲得还可以，请点个赞吧！