网页动效用 transform 提升流畅度的核心是绕过主线程重排重绘，仅走 GPU 合成；需创建独立合成层并只操作 transform 和 opacity 等可合成属性，避免混入 left、width 等触发 CPU 渲染的属性。
网页动效用 transform 提升流畅度，核心不是“开启硬件加速”，而是让动画绕过主线程的重排（layout）和重绘（paint），只走 GPU 合成（composite）这一步。真正起作用的是浏览器为元素创建独立合成层，并全程只操作可合成属性。
只用 transform 和 opacity 动画
left、top、width、height、margin、background-color 这些属性一动，浏览器就得重新计算布局、重画像素，CPU 满负荷也难保 60fps。而 transform（如 translateX、scale、rotate）和 opacity 属于合成属性，浏览器会把它们单独拎进一个图层，后续变化只是挪纹理或调透明度。
- ✅ 正确写法：
transition: transform 0.3s, opacity 0.3s; - ❌ 错误写法：
transition: all 0.3s;或transition: left 0.3s, transform 0.3s;——混入任一非合成属性，整段退化到 CPU 渲染 - 动画中 JS 修改样式时，也只改
transform或opacity，避免同步读取offsetWidth、getBoundingClientRect()等触发 layout 的属性
合理触发合成层，不滥用 translate3d
transform: translate3d(0, 0, 0) 或 translateZ(0) 不是开关，而是向浏览器发出“请升层”的信号。它只在后续动画纯走 transform/opacity 时才真正生效；否则反而增加内存开销、引发卡顿。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- iOS Safari 推荐优先用
translateZ(0)，更轻量、语义更准 - 不要全局加：比如
.spinner { transform: translate3d(0,0,0); }—— 静态图标、短于 160ms 的过渡、纯文字容器加了反而拖慢整体渲染 - 父容器有
overflow: hidden、filter、opacity < 1，会压制子元素提层，translate3d就白写了
验证是否真生效，别只看代码
写了 translate3d 不等于 GPU 在干活。关键得看浏览器是否真建了独立图层。
- Chrome DevTools → More Tools → Rendering → 勾选 “Layer Borders”
- 绿色边框 = 成功升层；没绿框 = 被父容器压制 / 动画属性不纯（比如同时动了
height）/ 浏览器太老（Android 4.4 以下不支持） - @keyframes 动画里每个关键帧都要写
transform: translate3d(x, y, 0)，不能一半translateX一半translate3d，否则图层被销毁重建，闪一帧
配合 will-change 提前提示，但别滥用
will-change: transform 是提示器，不是强制指令。静态加等于提前塞满 GPU 显存。
- 推荐做法：JS 动画开始前 1–2 帧设置
el.style.willChange = 'transform' - 监听
transitionend后立刻设回'auto'；iOS 上animationend可能丢失，加setTimeout兜底 - 绝对不要写
* { will-change: transform; }或批量给列表项加——低端安卓机容易 OOM
