如何通过css animation控制高度和宽度变化-css教程-PHP中文网

答案：控制CSS动画中高度和宽度变化需注意性能、auto值处理、box-sizing影响及缓动函数选择。关键在于避免直接动画height/width引发的重排，推荐用transform: scale()提升性能；应对height: auto时可采用max-height配合overflow: hidden实现平滑展开；同时合理设置box-sizing确保尺寸预期一致，并通过cubic-bezier等缓动函数增强视觉流畅性，在手风琴、模态框、骨架屏等场景中实现自然的布局动态效果。

如何通过css animation控制高度和宽度变化

通过CSS

animation

登录后复制

控制元素的高度和宽度变化，核心在于利用

@keyframes

登录后复制

规则定义动画序列中不同时间点的

height

登录后复制

和

width

登录后复制

属性值。这让你能够精确地编排元素从一个尺寸平滑过渡到另一个尺寸，甚至在多个尺寸之间循环，实现比简单

transition

登录后复制

更复杂的动态效果。

解决方案

要实现通过

animation

登录后复制

控制高度和宽度变化，你需要定义一个

@keyframes

登录后复制

规则来指定动画的名称和关键帧（例如，0%、50%、100%等），然后在这些关键帧中设定目标元素的

height

登录后复制

和

width

登录后复制

属性。接着，将这个动画应用到目标元素上。

/* 定义一个名为 'sizeChange' 的动画 */
@keyframes sizeChange {
  0% {
    width: 100px;
    height: 50px;
    background-color: lightblue;
  }
  50% {
    width: 200px;
    height: 100px;
    background-color: coral;
  }
  100% {
    width: 150px;
    height: 75px;
    background-color: lightgreen;
  }
}

/* 将动画应用到某个元素 */
.animated-box {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  border: 1px solid #333;
  margin: 20px;

  /* 应用动画 */
  animation-name: sizeChange; /* 动画名称 */
  animation-duration: 4s; /* 动画持续时间 */
  animation-timing-function: ease-in-out; /* 动画速度曲线 */
  animation-iteration-count: infinite; /* 动画播放次数，infinite表示无限循环 */
  animation-direction: alternate; /* 动画方向，alternate表示来回播放 */
  /* animation-fill-mode: forwards; */ /* 动画结束后保持最后一帧状态 */
}

登录后复制

这段代码定义了一个名为

sizeChange

登录后复制

的动画，它让一个元素的宽度从100px变到200px再变到150px，高度也随之变化，并且背景色也会同步过渡。通过

animation

登录后复制

属性的简写形式或各个子属性，你可以精细控制动画的持续时间、速度曲线、循环次数、播放方向等。这给了我们极大的灵活性去构建各种视觉效果，从简单的尺寸调整到复杂的布局动态。

在

keyframes

登录后复制

动画中高度和宽度变化的关键考量是什么？

当我们决定用

@keyframes

登录后复制

来控制元素的尺寸变化时，这背后其实藏着一些值得深思的技术点，并非简单地写上

height

登录后复制

和

width

登录后复制

属性就能万事大吉。我个人在实践中，最先考虑的往往是性能问题，毕竟谁也不想看到动画卡顿。

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

首先，性能开销是绕不开的话题。直接动画

height

登录后复制

和

width

登录后复制

属性，浏览器在每一帧都需要重新计算元素的布局（layout），这通常会导致页面重排（reflow），如果页面结构复杂，或者动画元素数量多，很容易造成性能瓶颈，用户就会觉得“卡”。相比之下，

transform: scale()

登录后复制

或

opacity

登录后复制

等属性的动画则通常只涉及渲染层（compositing），性能表现会好很多。所以，如果你的动画仅仅是等比例放大缩小，或者不需要精确到像素的尺寸变化，

transform: scale()

登录后复制

会是更好的选择。

其次，

auto

登录后复制

值的处理是个常见陷阱。你可能想让一个元素从

height: 0

登录后复制

展开到

height: auto

登录后复制

，以适应其内容。然而，

height: auto

登录后复制

是一个动态值，浏览器无法在动画开始前预知其最终的像素值，因此无法进行平滑插值。直接从

登录后复制

到

auto

登录后复制

的动画效果会非常生硬，甚至没有动画。我通常的解决方案是，要么通过JavaScript在动画开始前获取到

auto

登录后复制

对应的精确像素值，然后动画到这个固定值；要么，更常见也更推荐的做法是，使用

max-height

登录后复制

属性。你可以将

max-height

登录后复制

从

登录后复制

动画到一个足够大的固定值（比如

1000px

登录后复制

），确保它能容纳所有内容，同时结合

overflow: hidden

登录后复制

来隐藏超出部分。这样，元素会平滑地“展开”，虽然目标值不是

auto

登录后复制

，但视觉效果上是等价的。

/* 针对从0到auto的展开效果 */
.expand-box {
  height: 0; /* 初始高度为0 */
  max-height: 0; /* 配合max-height */
  overflow: hidden; /* 隐藏溢出内容 */
  transition: max-height 0.5s ease-out; /* 使用transition，animation原理类似 */
}

.expand-box.is-expanded {
  max-height: 500px; /* 展开到足够大的值 */
}

/* 如果用animation，@keyframes可以这样定义 */
@keyframes expandContent {
  from {
    max-height: 0;
  }
  to {
    max-height: 500px; /* 假设最大高度不会超过500px */
  }
}

.animated-expand-box {
  height: auto; /* 实际高度由内容决定 */
  max-height: 0;
  overflow: hidden;
  animation-name: expandContent;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  /* ...其他动画属性 */
}

登录后复制

再者，

box-sizing

登录后复制

属性也会影响你对尺寸变化的预期。如果你在动画中改变

width

登录后复制

或

height

登录后复制

，而元素的

padding

登录后复制

或

border

登录后复制

是固定的，那么

content-box

登录后复制

和

border-box

登录后复制

的表现会完全不同。在

border-box

登录后复制

模式下，

width

登录后复制

和

height

登录后复制

包含

padding

登录后复制

和

border

登录后复制

，这通常更符合我们直观的尺寸控制；而在

content-box

登录后复制

模式下，

width

登录后复制

和

height

登录后复制

只代表内容区域，最终元素的总尺寸会更大。理解这一点，可以避免动画过程中出现意外的尺寸跳动。

最后，动画的缓动函数（timing-function）同样重要。

ease-in-out

登录后复制

、

linear

登录后复制

、

cubic-bezier

登录后复制

等不同的函数，能赋予动画截然不同的“性格”。一个生硬的

linear

登录后复制

动画可能看起来很机械，而一个精心设计的

cubic-bezier

登录后复制

则能让尺寸变化显得更有生命力，比如先加速后减速，或者带有轻微的“弹跳”感。这在用户体验层面，有时比像素级的精确度更关键。

动画高度和宽度时如何避免常见的性能陷阱？

正如我前面提到的，直接动画

height

登录后复制

和

width

登录后复制

属性确实是性能陷阱的高发区。避免这些陷阱，不仅仅是优化代码，更是一种对用户体验的尊重。

一个非常有效的策略是优先使用

transform: scale()

登录后复制

。当你的目标只是让元素看起来变大或变小，而不是改变它在文档流中占据的空间时，

scale()

登录后复制

是首选。

transform

登录后复制

属性的动画通常由GPU处理，不会触发布局重排，性能表现极佳。

@keyframes scaleChange {
  0% {
    transform: scale(1); /* 初始比例 */
    background-color: lightblue;
  }
  50% {
    transform: scale(1.5); /* 放大1.5倍 */
    background-color: coral;
  }
  100% {
    transform: scale(1.2); /* 缩小到1.2倍 */
    background-color: lightgreen;
  }
}

.animated-scaled-box {
  width: 100px; /* 元素实际占据的空间不变 */
  height: 50px;
  background-color: lightblue;
  border: 1px solid #333;
  margin: 20px;

  animation-name: scaleChange;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

登录后复制

你看，这个例子中，

width

登录后复制

和

height

登录后复制

是固定的，但通过

transform: scale()

登录后复制

，元素在视觉上实现了尺寸变化，同时避免了布局重排。

百度·度咔剪辑

度咔剪辑，百度旗下独立视频剪辑App

查看详情

当确实需要改变元素在文档流中占据的空间时，例如手风琴效果的展开，

max-height

登录后复制

和
max-width
登录后复制
配合
overflow: hidden
登录后复制
是比直接动画

height

登录后复制

width

登录后复制

更优的方案，尤其是在涉及

auto

登录后复制

值时。虽然

max-height

登录后复制

的动画仍然会触发布局，但它避免了从

登录后复制

到

auto

登录后复制

这种无法插值的问题，并且在很多情况下，其性能表现比直接动画

height

登录后复制

要好一些。关键在于，你要给

max-height

登录后复制

设置一个足够大的值，确保它能容纳所有内容，但又不能过大导致动画时间过长或出现不自然的“空白”等待。

此外，合理使用

will-change

登录后复制

属性也可以在一定程度上帮助浏览器优化。

will-change

登录后复制

可以提前告知浏览器哪些属性将要发生变化，让浏览器有机会提前进行一些优化，比如创建独立的渲染层。但这个属性要慎用，滥用反而可能导致性能下降，因为它会消耗额外的内存和GPU资源。只在动画即将开始前，并且确实能带来性能提升的情况下使用它。

.potentially-animated-element {
  /* ...其他样式 */
  will-change: width, height, transform; /* 告诉浏览器这些属性可能会变化 */
}

登录后复制

最后，简化

keyframes

登录后复制

的复杂性。如果你的动画有太多的关键帧，或者关键帧之间变化幅度过大，也会增加浏览器的计算负担。尽量保持关键帧的简洁和变化路径的平滑。有时候，一个简单的两步动画（

from

登录后复制

到

to

登录后复制

）配合合适的缓动函数，效果可能比十几个关键帧的复杂动画更好，而且性能更优。这就像写文章，有时候精炼的几句话比冗长的大段文字更能打动人。

结合实际场景，

animation

登录后复制

在布局动态变化中有什么创新应用？

animation

登录后复制

在布局动态变化中的应用远不止于简单的尺寸伸缩，它能为用户界面带来生动的反馈和更流畅的体验。从我的角度看，这些应用往往是设计师和开发者共同创新的结果。

1. 优雅的展开/折叠组件（Accordion/Collapse）：这是最经典的用例之一。当我们点击一个标题，下面的内容区域平滑地展开或折叠，这通常就是通过

animation

登录后复制

（或

transition

登录后复制

结合

max-height

登录后复制

）来控制高度变化的。创新之处在于，你可以为展开和折叠设置不同的缓动函数，或者在展开过程中，让内容稍微“弹跳”一下，增加趣味性。

/* 一个简单的手风琴展开动画 */
@keyframes accordionExpand {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 300px; /* 假设内容最大高度 */
    opacity: 1;
  }
}

.accordion-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  /* 当某个类被添加时触发动画 */
  /* .is-expanded {
    animation: accordionExpand 0.5s ease-out forwards;
  } */
}

登录后复制

2. 模态框（Modal）和侧边栏（Sidebar）的登场与退场：这些覆盖层组件的出现和消失，如果只是生硬地显示隐藏，体验会很差。通过

animation

登录后复制

控制它们的宽度、高度（或者更常见的

transform

登录后复制

和

opacity

登录后复制

），可以实现从屏幕边缘滑入、从中心放大等效果。例如，一个侧边栏可以从屏幕左侧以

width: 0

登录后复制

开始，动画到

width: 300px

登录后复制

，同时内容逐渐显现。

3. 骨架屏（Skeleton Loaders）的动态占位：在内容加载完成之前，我们通常会显示一个灰色的占位符，这就是骨架屏。骨架屏中的文本行、图片区域等，它们的尺寸和形状是预设的。

animation

登录后复制

可以用来让这些占位符在加载过程中产生微小的尺寸变化，或者通过

gradient

登录后复制

动画制造“波浪”效果，模拟内容正在被“填充”的感觉，从而减少用户的等待焦虑。

4. 动态图表和数据可视化：这绝对是

animation

登录后复制

的用武之地。当数据更新时，图表中的柱状图、饼图扇区等元素，它们的宽度或高度会随之变化。如果能通过

animation

登录后复制

让这些变化平滑过渡，而非瞬间跳变，数据趋势的展示会更加直观和富有表现力。比如，柱状图的柱子从底部逐渐“生长”到新的高度。

5. 微交互（Micro-interactions）中的反馈：用户点击按钮、输入表单时，我们希望给他们即时反馈。一个按钮在点击后，可以有一个微小的宽度或高度收缩动画，然后恢复，模拟“按下”的物理感。或者一个输入框在获得焦点时，底部边框可以有一个从细到粗的宽度动画。这些细微的尺寸变化，虽然不影响布局，却极大地提升了用户界面的“活泼感”。

这些创新应用的核心思想都是一样的：利用CSS