CSS 知识总结：渲染原理，用transition、animation做动画

CSS（层叠样式表）是用于描述网页样式和布局的语言，其渲染原理和动画实现是前端开发的核心内容。以下是关于CSS渲染原理及动画实现的详细总结：

浏览器渲染网页的过程可分为以下几个步骤：

1. 构建DOM树

   解析HTML文档，生成DOM（Document Object Model）树，表示文档的结构和内容。

2. 构建CSSOM树

   解析CSS文件或内联样式，生成CSSOM（CSS Object Model）树，表示样式规则。

3. 合并为渲染树（Render Tree）

   将DOM和CSSOM合并，生成渲染树，仅包含可见元素（如display: none的元素不会包含在内）。

4. 布局（Layout/Reflow）

   计算元素在视口中的位置和大小（盒模型、文档流等）。

5. 绘制（Paint）

   将元素的视觉属性（颜色、边框、阴影等）绘制到屏幕上。

6. 合成（Composite）

   根据层叠顺序将各层合并，最终显示在屏幕上。

• 触发更新的三种方式：

  全流程更新（JS → CSS → 样式 → 布局 → 绘制 → 合成）：如修改元素尺寸或位置。

  跳过布局（JS → CSS → 样式 → 绘制 → 合成）：如仅修改背景色。

  仅合成（JS → CSS → 样式 → 合成）：如使用transform或opacity（不触发重排或重绘）。

• 工具参考：
  CSS Triggers
  可查询各属性触发的更新流程。

CSS动画主要通过transition和animation实现，两者区别如下：

• 作用：补充属性变化的中间帧，实现平滑过渡。
• 适用场景：简单状态变化（如悬停效果）。
• 语法：transition: 属性名 时长 过渡方式 延迟;

  过渡方式：linear（匀速）、ease（默认，缓动）、ease-in（加速）、ease-out（减速）、cubic-bezier()（自定义曲线）。

  示例：.demo { width: 100px; height: 100px; background: red; transition: width 1s ease 0s;}.demo:hover { width: 200px; /* 悬停时宽度过渡到200px */}

• 限制：

  仅支持可插值的属性（如width、opacity），不支持display等离散属性。

  需通过交互（如:hover）或JS触发。

• 作用：通过@keyframes定义复杂动画序列，支持循环和方向控制。
• 适用场景：多阶段动画（如弹跳、旋转）。
• 语法：animation: 动画名 时长 过渡方式 延迟 次数 方向 填充模式 是否暂停;

  关键参数：

  infinite（无限循环）、alternate（往返播放）、forwards（保留最后一帧）。

  示例：#demo { width: 100px; height: 100px; background: red; animation: move 2s ease infinite alternate;}@keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(100px) translateY(100px); }}

• 优势：

  无需交互触发，可自动播放。

  支持多关键帧和复杂时间函数。

1. 优先使用transform和opacity

   这两个属性不会触发重排（Layout）或重绘（Paint），直接进入合成层，性能最佳。

   示例：.fast-animation { transform: translateX(100px); /* 高性能 */}

2. 避免频繁触发重排

   如同时修改width和height会多次触发布局，建议合并操作或使用will-change提示浏览器优化。

3. 减少动画元素数量

   动画元素过多会导致合成层占用内存增加。

• 渲染原理：浏览器通过DOM、CSSOM生成渲染树，依次经历布局、绘制和合成。
• 动画选择：

  transition适合简单过渡，animation适合复杂序列动画。

• 性能关键：使用transform和opacity提升动画流畅度，避免重排和重绘。

通过理解这些核心概念，可以更高效地编写CSS并优化页面性能。