多圆形移动加载动画实现问题求助（CSS+React）

你的问题核心在于两点：

• 动画使用绝对位置硬编码，导致所有小球最终跑到同一坐标重合
• 所有小球同时启动动画，且路径长度不同，造成速度不一致

下面是修复后的实现方案：

核心修改思路 #

1. 改用 transform: translate() 代替 left/top 控制位置：transform基于元素自身位置偏移，不会覆盖初始布局位置，避免重合问题
2. 给每个小球添加动画延迟，实现依次启动的 stagger 效果
3. 调整关键帧，让运动路径基于自身位置的相对偏移，保证所有小球运动轨迹一致

修改后的代码 #

React 组件 #

export default function App() {
  return (
    <div>
      <div
        className="animation-container"
        style={{ padding: 100, border: '1px solid red' }}
      >
        {[1, 2, 3, 4].map((x, i) => {
          return (
            <div
              key={i}
              className="ball"
              style={{ 
                left: i * 30, 
                top: 100,
                animationDelay: `${i * 0.2}s` // 每个球延迟0.2s启动
              }}
            ></div>
          );
        })}
      </div>
    </div>
  );
}

CSS 样式 #

.animation-container {
  position: relative;
}

.ball {
  position: absolute;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  background-color: orange;
  animation: ball-move 2s infinite ease-in-out;
}

@keyframes ball-move {
  25% {
    /* 向左偏移自身宽度的距离，保持y轴不变 */
    transform: translateX(-100%);
  }
  50% {
    /* 向左偏移+向上偏移，y轴向上移动40px */
    transform: translateX(-100%) translateY(-40px);
  }
  75% {
    /* 向右回到初始x位置，保持向上的y位置 */
    transform: translateX(0) translateY(-40px);
  }
  100% {
    /* 回到初始位置 */
    transform: translateX(0) translateY(0);
  }
}

关键细节说明 #

• translateX(-100%)：相对于自身宽度向左移动100%，不管初始left是多少，都能保持相对偏移，避免重合
• animationDelay：通过索引计算延迟时间，让小球依次启动，模拟连贯的流动效果
• ease-in-out：让动画过渡更平滑，接近目标动画的质感

这样修改后，所有小球的运动轨迹完全一致，速度同步，且不会出现重合问题，完美复现你想要的加载动画效果。

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