在实现无限循环的缩放动画时，使用 transform: scale() 会导致元素视觉放大但不占据真实布局空间，从而与相邻项重叠；改用 width（配合 aspect-ratio）驱动动画，可让元素在放大时主动“推开”兄弟节点，彻底解决重叠问题。
在实现无限循环的缩放动画时，使用 `transform: scale()` 会导致元素视觉放大但不占据真实布局空间，从而与相邻项重叠；改用 `width`（配合 `aspect-ratio`）驱动动画，可让元素在放大时主动“推开”兄弟节点，彻底解决重叠问题。
当我们在 Flex 容器中对多个等距排列的方块（如 .box）应用 transform: scale(2.5) 动画时，尽管视觉上被放大，但其布局尺寸（layout box）保持不变——也就是说，浏览器仍按原始宽高（如 120px × 120px）计算位置和间距，导致放大后的视觉内容溢出并覆盖邻近元素。
✅ 正确解法：用可参与布局的属性替代纯视觉变换
核心思路是：让动画直接影响元素的盒模型尺寸，使 Flex 布局引擎自动重新分配空间。由于所有 .box 元素设置了 aspect-ratio: 1，只需动画控制 width，高度将同步响应，保持正方形形态且无变形。
以下是优化后的关键代码逻辑：
.box {
width: 50px; /* 基准尺寸（比原120px更小，为放大留出余量） */
aspect-ratio: 1; /* 自动维持宽高比，无需设置 height */
background: var(--bg);
border-radius: 4px;
animation: bounce 16s var(--delay) infinite cubic-bezier(.2, .65, .6, 1);
}
@keyframes bounce {
0%, 20% { width: 50px; } /* 缩回原始尺寸 */
10% { width: 125px; } /* 放大至 50px × 2.5 = 125px，等效于 scale(2.5) */
}⚠️ 注意事项：
- 避免混用 transform 与尺寸动画：若同时存在 scale() 和 width 动画，可能引发不可预测的渲染行为或性能抖动；
- 合理设置基准尺寸：原始 width 需预留足够空间（例如从 120px 降至 50px），确保放大后（125px）仍能被容器容纳且不触发换行；
- gap 属性保持生效：Flex 容器的 gap: 16px 会自动作用于动态变化的元素之间，无需额外调整；
- 性能考量：width 是可硬件加速的属性（尤其在现代浏览器中配合 will-change: width 可进一步优化），实际性能与 transform 相当，且语义更清晰。
最终效果：每个 .box 在动画峰值时独占更大布局空间，其余元素自动向两侧平滑位移，全程无重叠、无裁剪、无布局跳动，真正实现「有呼吸感」的节奏化焦点动画。
