应优先使用 transform 和 opacity 实现动画，避免 top/left/width/height 等触发重排的属性；控制同时动画元素在 20–40 个以内，用 requestAnimationFrame、contain、will-change（动态增删）及媒体查询降级优化性能。
避免对大量 DOM 元素同时应用复杂 CSS 动画，核心是减少主线程压力和合成层开销。重点不是“能不能动”，而是“怎么动更轻、更可控”。
优先用 transform + opacity，避开重排属性
大量元素动画时，最易踩坑的是混用 top/left/width/height 等触发重排的属性。哪怕只改一个 left，浏览器就得重新计算整个布局树。
- 位移统一用
transform: translateX()和translateY() - 缩放用
transform: scale()，旋转用rotate() - 显隐切换只用
opacity，别用visibility或display - 绝对禁止在同一批动画里写
transition: left 0.3s, transform 0.3s——left会拖垮全部
控制数量与节奏，不贪多、不堆帧
GPU 能扛住几十个 transform 动画，但一旦上百个叠加，或动画本身含多段关键帧、高频率变化（如每秒 60 次 rotateZ），合成线程也会吃紧。
- 单页同时运行的动画元素建议控制在 20–40 个以内；超出时考虑分批启动（如滚动进入视区再触发动画）
- 降低动画密度：把 0.1s 的快速抖动换成 0.3s 的缓动位移，视觉影响小，性能负担明显下降
- 用
requestAnimationFrame替代setTimeout控制 JS 驱动的动画节奏，避免丢帧或强制同步
主动隔离与降级，给浏览器减负
不是所有元素都值得硬件加速。该省则省，该提则提。
- 对非关键动画元素（比如背景装饰点、次要图标），直接关掉过渡：
transition: none或移除相关 class - 确需提升合成层时，用
will-change: transform，但仅在动画开始前动态添加，结束后立刻移除 - 用
contain: layout paint style封装动画容器，防止子元素变化影响外部布局计算 - 移动端可加媒体查询降级：
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
批量处理 DOM，避免逐个触发
JS 批量操作样式或 class 是常见诱因。比如循环给 100 个元素加 animate-in 类，每个都会单独触发一次重排+过渡队列。
- 改用 DocumentFragment 构建离线节点，一次性挂载
- JS 修改前先读取一次布局属性（如
el.offsetHeight），强制同步计算，清空旧过渡状态 - 用 CSS 自定义属性（
--anim-offset）配合transform: translateX(var(--anim-offset))，只需改一个变量，批量驱动多个元素
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
