在前端页面交互开发中，经常需要实现元素高度和宽度的动态变化效果，比如下拉菜单展开、卡片尺寸切换、加载动画等场景，使用css animation可以高效实现这类效果，并且能灵活控制变化的过程和规则。
css animation控制尺寸变化的核心原理
css animation通过定义@keyframes关键帧规则，指定元素在不同时间节点的样式状态，再配合animation相关属性控制动画的播放时长、时间曲线、延迟、循环次数等参数，从而实现高度和宽度的平滑变化。
要实现高度和宽度的变化，核心就是在关键帧中设置不同的height和width属性值，浏览器会自动计算两个关键帧之间的过渡状态，生成连续的动画效果。
基础实现步骤
1. 定义关键帧
使用@keyframes定义动画名称，然后在内部设置起始和结束状态的高度、宽度值，也可以添加中间状态的关键帧。
/* 定义名为sizeChange的动画 */
@keyframes sizeChange {
/* 起始状态：高度100px，宽度100px */
from {
height: 100px;
width: 100px;
}
/* 结束状态：高度200px，宽度200px */
to {
height: 200px;
width: 200px;
}
}
2. 绑定动画到元素
在目标元素的样式中，通过animation-name指定要使用的动画名称，再通过animation-duration设置动画播放时长，其他属性可以根据需求可选配置。
.target-element {
/* 初始高度和宽度，和关键帧起始状态保持一致 */
height: 100px;
width: 100px;
background-color: #4CAF50;
/* 指定使用的动画名称 */
animation-name: sizeChange;
/* 动画播放时长2秒 */
animation-duration: 2s;
/* 时间曲线为匀速 */
animation-timing-function: linear;
}
3. 完整示例
下面是一个点击按钮触发元素尺寸变化的完整示例，动画播放完成后会保持结束状态。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css animation尺寸变化示例</title>
<style>
.box {
height: 100px;
width: 100px;
background-color: #4CAF50;
/* 默认不播放动画 */
animation: none;
}
/* 定义动画 */
@keyframes sizeChange {
from {
height: 100px;
width: 100px;
}
to {
height: 200px;
width: 200px;
}
}
.box.animate {
/* 触发动画：名称sizeChange，时长2s，匀速，播放1次，结束后保持最终状态 */
animation: sizeChange 2s linear 1 forwards;
}
button {
margin-top: 20px;
padding: 8px 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="document.querySelector('.box').classList.toggle('animate')">切换尺寸动画</button>
</body>
</html>
常用动画属性说明
除了animation-name和animation-duration，还有多个属性可以调整动画效果，具体说明如下：
| 属性名 | 作用 | 常用取值 |
|---|---|---|
| animation-timing-function | 设置动画的时间曲线，控制变化的速度节奏 | ease（默认，慢快慢）、linear（匀速）、ease-in（慢入）、ease-out（慢出）、cubic-bezier(n,n,n,n)（自定义曲线） |
| animation-delay | 设置动画开始前的延迟时间 | 单位s或ms，比如1s表示延迟1秒播放 |
| animation-iteration-count | 设置动画播放的次数 | 1（默认播放1次）、infinite（无限循环）、具体数字 |
| animation-direction | 设置动画播放的方向 | normal（默认正向）、reverse（反向）、alternate（正向交替）、alternate-reverse（反向交替） |
| animation-fill-mode | 设置动画播放前后元素的样式状态 | none（默认无额外样式）、forwards（播放后保持结束状态）、backwards（播放前应用起始状态）、both（同时应用前后状态） |
注意事项
- 如果元素的高度或宽度初始值是
auto，直接设置关键帧的尺寸变化可能无法生效，建议先给元素设置明确的初始高度和宽度值。 - 频繁触发尺寸变化的动画时，尽量使用
transform属性的scale来实现缩放效果，相比直接修改height和width，transform的动画性能更好，不会触发页面的重排。 - 如果需要兼容旧版本浏览器，需要添加对应浏览器前缀，比如
-webkit-@keyframes、-moz-@keyframes等。 - 当元素内容高度不确定时，想要实现高度从0到自适应内容的动画，可以结合
max-height属性，设置一个足够大的max-height值作为结束状态，避免直接使用height:auto无法触发动画的问题。
max-height实现自适应高度动画示例
下面是使用max-height实现下拉菜单展开收起效果的示例，内容高度不确定也能正常播放动画。
/* 菜单容器默认收起 */
.menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: #f5f5f5;
width: 200px;
}
/* 展开状态，设置一个足够大的max-height值 */
.menu.open {
max-height: 500px;
transition: max-height 0.5s ease-in;
}
注意这里使用的是transition属性，它和animation的区别是transition只能定义起始和结束两个状态，而animation可以通过关键帧定义多个中间状态，两者都可以实现尺寸变化效果，根据场景选择即可。
css_animationheight变化width变化transition关键帧修改时间：2026-07-22 20:57:36