通过设置width和transition属性，可实现元素宽度平滑变化。.container初始宽100px，hover时过渡到200px，耗时0.3秒，缓动函数为ease。transition简写包含属性、时长、速度曲线和延迟。实际应用如侧边栏展开，使用cubic-bezier增强动画弹性。注意需设定明确宽度值，避免对display或visibility使用过渡，推荐指定具体属性以优化性能，同时确保父容器不裁剪动画过程。
在CSS中实现宽度变化的过渡效果，主要依靠 transition 属性。通过设置元素的 width 和 transition，可以让宽度在状态改变时（如鼠标悬停）平滑地变化，而不是瞬间跳变。
基本语法与原理
要实现宽度过渡，需要为元素设置以下两个关键部分：
- width：定义元素的初始和目标宽度
- transition：定义宽度变化的过程，包括持续时间、缓动函数等
示例代码：
.container {width: 100px;
height: 50px;
background-color: #3498db;
transition: width 0.3s ease;
}
.container:hover {
width: 200px;
}
当鼠标移入 .container 元素时，宽度会用 0.3 秒的时间从 100px 平滑过渡到 200px。
立即学习“前端免费学习笔记（深入）”；
transition 属性详解
transition 可以拆分为四个子属性：
- transition-property：指定哪个属性参与过渡（如 width）
- transition-duration：过渡持续时间（如 0.5s）
- transition-timing-function：缓动函数，控制速度曲线（如 ease、linear、ease-in-out）
- transition-delay：延迟多久开始过渡
可以简写为：
transition: width 0.5s ease-in-out 0.1s;实用案例：菜单展开效果
常见应用场景是侧边栏或下拉菜单的展开/收起。
.sidebar {width: 60px;
height: 100vh;
background: #2c3e50;
overflow: hidden;
transition: width 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.sidebar:hover {
width: 200px;
}
使用 cubic-bezier 可以让动画更有弹性，提升用户体验。
注意事项
实现宽度过渡时需要注意以下几点：
- 元素必须有明确的 width 初始值，不能是 auto（否则无法计算过渡）
- 避免对 display 或 visibility 使用过渡，可用 opacity 配合 visibility 控制显隐
- 如果希望多个属性同时过渡，可使用 transition: all 0.3s ease，但建议明确指定属性以提升性能
- 确保父容器不会影响子元素的宽度变化（如 overflow: hidden 可能裁剪动画过程）
