实现弹性盒子子元素动态动画需结合flex属性与@keyframes。1. 创建display: flex容器，设置子元素flex: 1；2. 定义@keyframes改变flex-grow实现伸缩；3. 为子元素添加animation属性触发周期性变化；4. 结合transform和背景色提升视觉流畅度；5. 可通过:hover或JavaScript控制动画触发时机，实现交互式弹性动画效果。
要实现弹性盒子（Flexbox）中子元素的动态动画，关键是将 CSS 的 flex 属性与 @keyframes 动画结合使用。通过控制 flex-grow、flex-shrink 或整体布局变化，配合 animation 属性，可以让子元素在容器中流畅地伸缩、位移或渐变。
1. 基础结构：创建 Flex 容器和子元素
先搭建一个基本的弹性布局。父容器使用 display: flex，子元素设置基础 flex 属性。
<div class="flex-container"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> </div>
CSS 设置：
.flex-container {
display: flex;
height: 100px;
gap: 5px;
}
.item {
height: 100%;
background: #007bff;
border-radius: 4px;
}
.item-1 { flex: 1; }
.item-2 { flex: 1; }
.item-3 { flex: 1; }
2. 定义关键帧动画 @keyframes
使用 @keyframes 改变子元素的 flex-grow 值，实现宽度动态扩展效果。
立即学习“前端免费学习笔记（深入）”；
@keyframes expand-item {
0% {
flex-grow: 1;
}
50% {
flex-grow: 3;
}
100% {
flex-grow: 1;
}
}
这个动画会让元素从正常大小扩展到占据更多空间，再恢复。
3. 应用 animation 到子元素
给某个子元素添加 animation 属性，触发 flex-grow 变化动画。
.item-2 {
flex: 1;
animation: expand-item 3s infinite ease-in-out;
}
这样，第二个子元素会周期性地“膨胀”又恢复，其余元素自动压缩或伸展以适应空间。
4. 配合 transform 提升视觉效果
仅靠 flex-grow 动画可能不够平滑。可结合 transform 实现更自然的过渡。
例如，在动画中同时改变背景色和轻微位移：
@keyframes pulse-flex {
0% {
flex-grow: 1;
background: #007bff;
transform: scaleX(1);
}
50% {
flex-grow: 4;
background: #0056b3;
transform: scaleX(1.1);
}
100% {
flex-grow: 1;
background: #007bff;
transform: scaleX(1);
}
}
注意：transform 不影响布局流，适合做视觉增强。
5. 控制动画时机与交互触发
默认动画自动播放。如需用户交互触发，可用 :hover 或 JavaScript 控制类名切换。
比如用 hover 触发：
.item:hover {
flex-grow: 5;
transition: flex-grow 0.5s ease;
}
或者保留 animation 但通过类控制启动：
.item.animate-now {
animation: expand-item 2s forwards;
}
JS 中添加类即可启动：element.classList.add('animate-now')
基本上就这些。通过 flex 与 animation 协同，能做出富有弹性的动态布局效果，适用于导航栏、加载指示、响应式模块等场景。关键是理解 flex 的空间分配机制和动画属性的兼容性。不复杂但容易忽略细节。
