如何在CSS中实现元素尺寸平滑过渡_width height动画技巧-css教程-PHP中文网

如何在CSS中实现元素尺寸平滑过渡_width height动画技巧

P粉602998670

发布： 2025-11-04 23:44:02

原创

455人浏览过

使用transition实现宽高平滑过渡，需避免height:auto，推荐max-height或transform:scale()优化性能，结合hover或JS控制状态切换。

如何在css中实现元素尺寸平滑过渡_width height动画技巧

在CSS中实现元素的width和height平滑过渡，关键在于使用transition属性，并合理设置初始状态与目标状态。只要控制好触发条件和过渡参数，就能实现自然流畅的尺寸动画效果。

启用transition控制宽高变化

要让width和height的变化变得平滑，必须为元素添加transition声明。直接修改尺寸时，浏览器会自动计算中间帧，形成动画。

示例：
div {
  width: 100px;
  height: 50px;
  background: #007acc;
  transition: width 0.3s ease, height 0.3s ease;
}

div:hover {
  width: 200px;
  height: 100px;
}

当鼠标悬停时，宽度和高度会在0.3秒内线性过渡。你可以调整时间函数（如ease-in、ease-out或cubic-bezier()）来改变动画节奏。

避免auto带来的动画失效

使用height: auto时，CSS无法计算过渡的中间值，导致动画“跳跃”而非平滑展开。解决办法是预设一个具体高度，或改用max-height模拟展开效果。

立即学习“前端免费学习笔记（深入）”；

推荐方案（手风琴展开）：
.box {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.box.expanded {
  max-height: 500px; /* 设置足够大的值 */
}

这样内容可以逐步展开，适用于下拉菜单或折叠面板。