通过设置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 可以拆分为四个子属性：

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

• 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 可能裁剪动画过程）

基本上就这些。掌握 width 与 transition 的配合，就能轻松做出自然的宽度动画效果。