通过transition属性实现宽高平滑过渡，需配合width、height设置起止值与动画参数，利用:hover、:focus或JavaScript触发状态变化，如按钮悬停放大效果，注意避免使用auto、优化性能并考虑transform替代方案。
在CSS中实现宽高变化的平滑过渡，核心是transition属性与width、height的配合使用。只要设置好过渡属性和触发条件，元素的尺寸变化就能变得自然流畅，常用于按钮悬停、菜单展开等交互场景。
设置transition控制宽高过渡
要让width和height的变化产生动画效果，必须通过transition指定哪些属性需要过渡，以及过渡的时间和缓动方式。
- 给元素设置
transition: width 0.3s ease, height 0.3s ease;，可分别控制宽高的过渡行为 - transition: all 0.3s;也能生效，但不够精确>
- 常见属性值包括时长（如
0.3s）、缓动函数（如ease-in-out）和延迟（可选）
触发宽高变化的常用方式
transition本身不会主动触发变化，需要通过状态改变来驱动尺寸更新。最常见的方法是利用伪类或JavaScript。
- 使用
:hover实现鼠标悬停时扩大元素 - 通过
:focus在输入框获得焦点时调整大小 - 结合
class切换，用JavaScript动态添加或移除类名来触发变化
实际示例：按钮悬停放大
下面是一个简单的按钮，鼠标移入时宽度从100px过渡到140px，高度从40px变为50px。
立即学习“前端免费学习笔记（深入）”；
.button {
width: 100px;
height: 40px;
background: #007bff;
color: white;
text-align: center;
line-height: 40px;
transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.3s ease;
}
.button:hover {
width: 140px;
height: 50px;
}
这里使用了cubic-bezier来自定义缓动曲线，使动画更生动。注意保持line-height与height同步更新，避免文字偏移。
注意事项与优化建议
虽然宽高过渡简单易用，但也有一些细节需要注意，以确保动画流畅且不引发性能问题。
- 避免对大量元素同时做复杂尺寸动画，可能影响渲染性能
- 初始值尽量不要使用
auto，因为auto无法被transition识别为可动画的数值 - 可考虑用
transform: scale()替代宽高变化，性能更好，但会保持原有布局空间 - 在移动端注意触发区域是否足够大，便于触摸操作
基本上就这些。掌握width、height与transition的搭配，能快速实现直观的视觉反馈。关键是设置明确的起止值，并选择合适的过渡参数，让交互更自然。
