在CSS中实现元素大小渐变动画，核心是通过animation属性配合关键帧来动态修改元素的width和height属性，这种方式可以灵活控制元素从初始尺寸到目标尺寸的变化过程，适配多种场景的动效需求。
基础实现原理
CSS动画的实现需要两个核心部分：一是定义关键帧@keyframes规则，描述元素在不同时间点的样式状态；二是通过animation属性将关键帧规则绑定到目标元素上，并设置动画的时长、播放次数等参数。
要实现大小渐变，只需要在关键帧中修改元素的width和height属性即可，浏览器会自动计算两个状态之间的过渡值，生成平滑的渐变效果。
基础代码示例
下面是一个让元素从100px宽高渐变到300px宽高的基础示例：
/* 定义关键帧动画 */
@keyframes sizeChange {
/* 动画起始状态 */
from {
width: 100px;
height: 100px;
}
/* 动画结束状态 */
to {
width: 300px;
height: 300px;
}
}
/* 目标元素样式 */
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
/* 绑定动画：动画名称 时长 播放速度 延迟 播放次数 方向 */
animation: sizeChange 2s ease-in-out 0s infinite alternate;
}
对应的HTML结构如下：
<div class="box"></div>
animation属性常用参数说明
animation是复合属性，也可以拆分为单个属性设置，常用参数含义如下：
| 属性名 | 含义 | 常用取值 |
|---|---|---|
| animation-name | 绑定的关键帧名称 | 自定义的关键帧名称，如sizeChange |
| animation-duration | 动画单次播放时长 | 时间单位，如2s、500ms |
| animation-timing-function | 动画播放速度曲线 | ease、ease-in-out、linear、cubic-bezier() |
| animation-delay | 动画延迟播放时间 | 时间单位，如1s，默认0s |
| animation-iteration-count | 动画播放次数 | 数字、infinite（无限次） |
| animation-direction | 动画播放方向 | normal、alternate（往返播放）、reverse |
非正方形元素的渐变实现
如果元素不需要等比例缩放，可以单独设置width和height的变化值，比如实现一个宽度从100px到400px，高度从100px到200px的渐变动画：
@keyframes rectangleChange {
0% {
width: 100px;
height: 100px;
}
100% {
width: 400px;
height: 200px;
}
}
.rectangle-box {
width: 100px;
height: 100px;
background-color: #2196F3;
animation: rectangleChange 3s ease infinite alternate;
}
常见问题与优化技巧
1. 动画卡顿问题
直接修改width和height会触发浏览器的重排（reflow）操作，当动画元素较多时可能出现卡顿。如果元素不需要固定宽高布局，可以优先使用transform: scale()实现缩放，该属性只会触发重绘（repaint），性能更好，示例：
@keyframes scaleChange {
from {
transform: scale(1);
}
to {
transform: scale(3);
}
}
.scale-box {
width: 100px;
height: 100px;
background-color: #FF9800;
animation: scaleChange 2s ease infinite alternate;
}
2. 动画结束后保持最终状态
默认情况下动画结束后会回到初始状态，如果需要保持结束时的样式，可以设置animation-fill-mode: forwards：
.keep-end-box {
width: 100px;
height: 100px;
background-color: #9C27B0;
animation: sizeChange 2s ease forwards;
}
3. 响应式场景适配
如果需要在不同屏幕尺寸下设置不同的渐变目标值，可以结合媒体查询修改关键帧或者元素的目标属性，比如在小屏幕上将最大宽高设置为200px：
@media (max-width: 768px) {
@keyframes sizeChange {
from {
width: 80px;
height: 80px;
}
to {
width: 200px;
height: 200px;
}
}
}
CSS_animationwidthheight渐变动画修改时间：2026-07-07 20:54:12