animation通过关键帧实现动画，适用于样式变化；flex-grow用于布局分配，不支持直接动画，应使用transition配合width或flex-basis实现平滑伸缩效果。
在CSS中，animation 和 flex-grow 都可以实现动画效果，但它们的机制和适用场景不同。理解两者的区别与结合使用方式，有助于更好地控制布局中的动态变化。
animation 实现传统动画
通过 @keyframes 定义关键帧，配合 animation 属性，可以控制元素的多个样式属性随时间变化。
例如，让一个 flex 子项在加载时逐渐变宽：
@keyframes expand {from { flex-grow: 0; }
to { flex-grow: 1; }
}
.item {
display: flex;
animation: expand 1s ease-in-out;
}
这种方式看似可行，但在实际中存在限制：不是所有浏览器都支持对 flex-grow 这类布局属性进行动画插值（尤其是在旧版本浏览器中）。
立即学习“前端免费学习笔记（深入）”；
flex-grow 自身不直接支持平滑动画
flex-grow 是一个整数值，用于分配容器中的剩余空间。它本身不具备过渡能力。
若想实现伸缩过程的动画效果，需借助 transition 改变可动画属性，比如 width 或 transform，而不是直接动画 flex-grow。
更可靠的做法是：
- 使用 width 或 flex-basis 作为可过渡属性
- 结合 transition 实现平滑伸缩
flex-basis: 100px;
transition: flex-basis 0.3s ease;
}
flex-basis: 200px;
}
结合 animation 与 flex 的实用技巧
虽然直接动画 flex-grow 不稳定，但可以通过改变其他可动画属性来模拟伸缩动画。
例如，使用 transform 缩放视觉效果：
@keyframes stretch {from { transform: scaleX(1); }
to { transform: scaleX(1.5); }
}
.item {
transform-origin: left;
animation: stretch 0.5s forwards;
}
注意：transform 不影响布局流，可能造成重叠，需谨慎使用。
基本上就这些。直接用 animation 控制 flex-grow 效果不可靠，推荐通过 flex-basis + transition 实现更稳定的伸缩动画。灵活选择属性，才能让动画既流畅又符合布局预期。不复杂但容易忽略细节。
