width/height过渡卡顿因触发布局重排且无法GPU加速；transform: scale()仅重绘、支持硬件加速，更流畅。
直接用 transition 控制 width 或 height 变化，常出现卡顿、闪烁或跳变，根本原因是这些属性触发了浏览器的**布局重排（reflow）**，计算成本高，无法被硬件加速。而 transform: scale() 作用于合成层，只触发重绘（repaint）甚至不触发，动画更顺滑。
为什么 width/height 过渡不连贯
当元素的 width、height、padding、margin 等影响几何尺寸的属性变化时，浏览器必须重新计算整个文档流（reflow），再重绘（repaint）。这个过程无法被 GPU 加速，尤其在中低端设备或复杂 DOM 下，帧率容易掉到 30fps 以下，肉眼就能察觉卡顿或“抽搐”。
另外，如果元素宽高依赖内容（如 auto）、或受父容器限制（如 flex / grid 约束），CSS 引擎可能无法预估中间帧，导致过渡中断或直接跳变。
用 transform scale 替代尺寸过渡（推荐做法）
transform: scale() 属于 CSS 合成属性，只改变视觉呈现，不改变文档流，天然支持 GPU 加速。只要搭配 will-change: transform 或已提升为合成层（如含 opacity、filter、transform 的元素），就能实现 60fps 流畅缩放。
立即学习“前端免费学习笔记（深入）”；
- 把「尺寸变化」转为「视觉缩放」：例如想让一个按钮从 100×40px 扩展到 160×60px，不要改 width/height，而是保持原始尺寸，用
scale(1.6, 1.5)模拟放大效果 - 注意锚点问题：默认以元素中心缩放，用
transform-origin调整基准点（如top left实现左上角展开） - 确保父容器能容纳缩放后的内容，避免裁剪；必要时给父元素加
overflow: visible - 配合
transition: transform 0.3s ease，比width 0.3s更稳
需要真实尺寸变化？试试这些优化技巧
某些场景（如手风琴菜单、响应式侧边栏）确实需真实改变布局尺寸。此时可结合以下方法缓解卡顿：
- 对目标元素添加
will-change: width, height（仅在动画前临时设置，结束后移除，避免滥用） - 用
max-height+overflow: hidden替代height：设一个足够大的max-height值（如max-height: 500px），过渡max-height不会触发 reflow（但值不能为none或auto） - 使用
clip-path配合 transition：比如clip-path: inset(0)→clip-path: inset(20% 0 0 0)，实现“拉开”效果，无布局影响 - 动画期间禁用指针事件：
pointer-events: none，避免交互干扰渲染
实际写法对比示例
❌ 卡顿写法（避免）：
button { width: 100px; height: 40px; transition: width 0.3s, height 0.3s; }<br>button:hover { width: 160px; height: 60px; }
✅ 流畅写法（推荐）：
button {<br> width: 100px; height: 40px;<br> transform-origin: top left;<br> transition: transform 0.3s ease;<br>}<br>button:hover {<br> transform: scale(1.6, 1.5);<br>}
⚠️ 注意：若缩放后文字模糊，可加 backface-visibility: hidden 或 -webkit-font-smoothing: antialiased 提升文本清晰度。
