调整相邻元素Zoom动画，解决缩放重叠问题

方案1：直接修改元素尺寸（取代transform scale） #

transform的scale只是视觉缩放，不会改变元素在文档流中占据的空间——这就是重叠的核心原因。换成直接修改width和height，让元素实际占据更多空间，flex布局会自动调整其他元素的位置，从根源避免重叠。

修改后的完整代码：

@keyframes bounce {
  10% {
    /* 直接修改宽高，替代transform scale */
    width: calc(120px * 2.5);
    aspect-ratio: 1;
  }
  20% {
    width: 120px;
  }
}
.main-box {
  width: 920px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 16px;
  border: solid yellow;
  /* 添加换行，防止元素超出容器 */
  flex-wrap: wrap;
}
.box {
  width: 120px;
  aspect-ratio: 1;
  background: var(--bg);
  border-radius: 4px;
  animation: bounce 16s var(--delay) infinite cubic-bezier(.2, .65, .6, 1);
  /* 允许元素收缩，适配布局 */
  flex-shrink: 1;
}
.box.one {
  --bg: slateblue;
  --delay:calc(0*16s/5)
}
.box.two {
  --bg: deeppink;
  --delay:calc(1*16s/5)
}
.box.three {
  --bg: dodgerblue;
  --delay:calc(2*16s/5)
}
.box.four {
  --bg: red;
  --delay:calc(3*16s/5)
}
.box.five {
  --bg: yellow;
  --delay:calc(4*16s/5)
}

body {
  height: auto;
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

<div class="main-box">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
  <div class="box four"></div>
  <div class="box five"></div>
</div>

方案2：保留transform scale，通过层级提升+预留空间 #

如果想保留transform的GPU加速性能优势，可以给放大的元素设置更高层级，让它覆盖在其他元素上方，同时给父容器预留足够空间，避免元素溢出：

修改后的核心代码：

@keyframes bounce {
  10% {
    transform: scale(2.5);
    z-index: 10; /* 放大时提升层级，避免被其他元素遮挡 */
  }
  20% {
    transform: scale(1);
    z-index: 1; /* 恢复默认层级 */
  }
}
.main-box {
  width: 920px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 16px;
  border: solid yellow;
  padding: 80px; /* 预留内边距，容纳放大后的元素 */
}
.box {
  width: 120px;
  aspect-ratio: 1;
  background: var(--bg);
  border-radius: 4px;
  animation: bounce 16s var(--delay) infinite cubic-bezier(.2, .65, .6, 1);
  position: relative; /* 让z-index生效 */
}
body {
  min-height: 400px; /* 调整body高度适配父容器内边距 */
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

方案3：flex-grow结合transform scale #

通过在元素放大时增加flex占比，让它分配到更多布局空间，同时配合transform scale调整视觉大小，兼顾布局合理性和动画性能：

修改后的核心代码：

@keyframes bounce {
  10% {
    transform: scale(2.5);
    flex-grow: 2; /* 放大时占据更多flex空间 */
    z-index: 10;
  }
  20% {
    transform: scale(1);
    flex-grow: 1; /* 恢复默认占比 */
    z-index: 1;
  }
}
.box {
  width: 120px;
  aspect-ratio: 1;
  background: var(--bg);
  border-radius: 4px;
  animation: bounce 16s var(--delay) infinite cubic-bezier(.2, .65, .6, 1);
  flex-grow: 1; /* 默认flex占比 */
  position: relative;
}

内容的提问来源于stack exchange，提问作者bengaltiger