同时修改 width 和 transform 会抖动，因 width 触发 layout 重排，transform 走合成层，二者冲突破坏合成帧；应仅用 transform（如 scale、translate）和 opacity 实现动画，避免 layout 属性。
为什么同时改 width 和 transform 会抖动
浏览器对不同 CSS 属性的渲染路径不同：width 触发 layout（重排），transform 走合成层（compositor），两者混用时，layout 阶段可能破坏已准备好的合成帧，导致视觉跳变或卡顿。尤其在低性能设备上，这种抖动更明显。
- 常见诱因：用
width+left/top做展开动画，或在transition中同时监听width和transform - 检查方法：打开 Chrome DevTools → Rendering → 勾选 “Paint flashing” 和 “Layer borders”，抖动期间若出现大面积黄色闪动或图层频繁重建，基本可确认是 layout 干扰了合成
- 根本原则：过渡中只变更能触发硬件加速的属性，避开
width、height、margin、padding、left、top等 layout 属性
用 transform: scale() 替代 width + height
缩放是纯合成操作，不触发布局，且能保持元素原始文档流位置。适合按钮展开、卡片浮起、菜单弹出等场景。
button {
transition: transform 0.3s ease;
}
button:hover {
transform: scale(1.1);
}
/* 不要写成：
button:hover {
width: 120px; ← 触发重排
height: 40px;
}
*/- 若需“横向展开”效果（比如下拉菜单宽度从 0→200px），用
transform: scaleX(0)→scaleX(1)，并配合transform-origin: left center控制缩放锚点 - 注意：
scale()会等比缩放子元素字体和边框，如需保持文字大小不变，对子元素反向缩放，例如font-size: calc(1em / 1.2) - 避免在
scale()同时设置width，否则浏览器可能降级回软件渲染
用 transform: translate() 替代 left / top
translate() 是最安全的位置过渡方式，不改变文档流，不触发 layout，且默认启用 GPU 加速。
.panel {
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.panel.open {
transform: translateX(0);
}
.panel.closed {
transform: translateX(-100%);
}- 不要混用：
left: 0和transform: translateX(0)同时存在，会导致行为不可预测 - 若原布局依赖
position: relative+left定位，迁移时需移除所有left/right/top/bottom，仅靠transform控制偏移 - 注意
transform的叠加顺序：多个translate会累加，但translate和scale混用时，顺序影响最终形态（建议统一写成transform: translateX(...) scaleY(...)）
需要真实尺寸变化？用 max-width + overflow 配合 transform
当业务逻辑必须体现“内容区域实际变宽”（比如侧边栏从 0→250px），又不能抖动，可借助 max-width 控制布局，再用 transform 做视觉补偿。
立即学习“前端免费学习笔记（深入）”；
.sidebar {
max-width: 0;
overflow: hidden;
transition: max-width 0.3s ease, opacity 0.3s ease;
}
.sidebar.open {
max-width: 250px;
opacity: 1;
}
/* 同时加一层包裹元素做平滑位移补偿 */
.sidebar::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.sidebar.open::before {
transform: translateX(0);
}-
max-width变化仍会触发 layout，但因配合overflow: hidden，浏览器通常只重排该元素自身，影响范围小得多 - 关键点：用伪元素或额外 wrapper 承担
transform动画，把视觉位移和布局变化解耦 - 慎用
clip-path替代——虽然也能隐藏，但在 Safari 中动画性能差，且部分旧版不支持
抖动本质是渲染管线冲突，不是“CSS 写得不够漂亮”。只要守住一条线：过渡期间只动 transform 和 opacity，其他都交给静态布局或 JS 计算后一次性更新，90% 的抖动问题就消失了。
