使用transform实现动画可避免布局重排，提升性能；需真实尺寸变化时再结合width/height过渡。
在现代网页设计中，CSS盒模型与动画过渡的结合使用能创造出流畅、自然的视觉效果。通过transition配合transform以及width、height属性，可以实现元素尺寸变化时的平滑动画，同时保持布局稳定性和性能优化。
理解盒模型与过渡的关系
每个HTML元素都基于CSS盒模型渲染，包含内容（content）、内边距（padding）、边框（border）和外边距（margin）。当直接改变width或height时，浏览器需要重新计算布局（reflow）并重绘（repaint），频繁操作可能影响性能。
使用transition可以让尺寸变化变得渐进，提升用户体验。例如：
.box {
width: 100px;
height: 100px;
background: #007bff;
transition: width 0.3s ease, height 0.3s ease;
}
.box:hover {
width: 150px;
height: 150px;
}
鼠标悬停时，盒子平滑扩展，但会引发布局变动，可能造成页面抖动。
立即学习“前端免费学习笔记（深入）”；
用 transform 替代宽高实现高性能动画
transform作用于图层的视觉呈现，不触发布局重排，因此更适合做动画。尤其是scale()函数，可模拟width和height的变化。
推荐做法：
- 设置固定
width和height - 使用
transform: scale()实现放大缩小 - 配合
transform-origin控制缩放基点 - 用
transition控制动画曲线
.box {
width: 100px;
height: 100px;
background: #007bff;
transition: transform 0.3s ease;
transform-origin: center;
}
.box:hover {
transform: scale(1.5);
}
此时元素视觉上放大1.5倍，但文档流中仍占100×100空间，避免页面其他元素位移。
结合 width/height 与 transform 的实用场景
某些情况下需真实改变尺寸，比如卡片展开显示更多信息。这时可混合使用：
- 对
width、height加transition实现真实扩展 - 用
overflow: hidden控制内容显隐 - 配合
transform做位移动画，如滑入效果
.card {
width: 200px;
height: 60px;
overflow: hidden;
background: #f0f0f0;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover {
height: 120px;
transform: translateY(0);
}
鼠标悬停后卡片高度展开，内部内容逐渐显示，cubic-bezier让动画更自然。
基本上就这些。关键在于根据需求选择合适方式：追求性能优先用transform，需要真实布局变化再动width/height，两者结合能让交互更细腻。
