使用transition时应统一宽高动画参数，优先用transform: scale实现流畅缩放，避免重排，提升性能。
在使用 CSS 的 transition 对元素的宽高同时进行动画时，如果直接对 width 和 height 分别设置过渡，可能会出现动画不流畅、卡顿或不同步的问题。这通常是因为浏览器渲染机制和过渡函数计算方式导致的。虽然你提到“transition-width 和 transition-height”，但需要说明的是：CSS 并没有 transition-width 或 transition-height 这样的属性，正确的做法是合理使用 transition 控制 width 和 height 的变化。
使用统一的 transition 属性控制宽高
确保 width 和 height 使用相同的过渡时间、缓动函数，避免分别设置造成节奏不一致。
.box {
width: 100px;
height: 100px;
transition: width 0.3s ease, height 0.3s ease;
}
<p>.box:hover {
width: 200px;
height: 200px;
}
或者更简洁地使用：
transition: all 0.3s ease;
但注意 all 可能会过渡不需要的属性，推荐明确列出。
立即学习“前端免费学习笔记（深入）”；
使用 transform: scale 替代宽高变化（推荐）
若只是视觉上放大缩小，优先考虑使用 transform: scale()。它基于 GPU 加速，动画更流畅，不会触发重排（reflow），性能更好。
.box {
width: 100px;
height: 100px;
transition: transform 0.3s ease;
}
<p>.box:hover {
transform: scale(2); /<em> 宽高都变为原来的2倍 </em>/
}
如果只需要非等比缩放，也可以使用 scaleX() 或 scaleY() 单独控制。
避免 layout thrashing，提升动画帧率
当元素宽高变化频繁时，尤其是 JavaScript 动态修改，容易引发连续重排，导致动画卡顿。
优化建议：- 尽量使用
transform而不是改变width/height - 避免在动画过程中读取
offsetWidth、clientHeight等布局属性 - 将动画属性提升为合成层，可添加
will-change: transform或transform: translateZ(0)
使用 CSS 自定义属性（CSS Variables）实现平滑过渡
CSS 原生不支持对自定义属性做过渡，但可以结合 @property（现代浏览器支持）实现动态过渡控制。
@property --scale {
syntax: '<number>';
initial-value: 1;
inherits: false;
}
<p>.box {
width: 100px;
height: 100px;
transform: scale(var(--scale));
transition: --scale 0.3s ease;
}</p><p>.box:hover {
--scale: 2;
}
注意：@property 目前在最新版 Chrome、Edge、Safari 中支持，Firefox 需要手动开启。
基本上就这些。想要宽高过渡自然，关键是减少重排、使用硬件加速、统一过渡参数。能用 transform 就不用改 width/height，动画会明显更顺滑。不复杂但容易忽略。
