CSS弹跳圆形动画失效求助：实现蛇形延迟弹跳效果

问题根源 #

你的动画没生效是因为top属性仅对非static定位的元素起作用，但默认.circle是static定位；如果设置position: absolute，元素会脱离文档流，破坏flex布局的排列导致堆叠。要在保持flex布局排列的同时实现弹跳，得用不影响文档流的属性做垂直位移。

解决方案 #

把动画里的top换成transform: translateY()，这个属性不会改变元素的布局位置，完美适配flex容器内的元素。同时调整动画参数和延迟，让蛇形弹跳效果更自然。

修改后的完整代码 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  list-style: none;
}

body{
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-container{
  position: relative;
  width: 900px;
  height: 300px;
  background-color: lightgrey;
  column-gap: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle{
  height: 100px;
  width: 100px;
  border-radius: 50%;
  /* 无需设置absolute，保持flex布局的排列 */
  animation: bouncingCircles 1s ease-in-out infinite alternate;
}

#one{
  background-color: blue;
  animation-delay: 0s;
}
#two{
  background-color: orange;
  animation-delay: 0.15s;
}
#three{
  background-color: purple;
  animation-delay: 0.3s;
}
#four{
  background-color: red;
  animation-delay: 0.45s;
}
#five{
  background-color: limegreen;
  animation-delay: 0.6s;
}

@keyframes bouncingCircles{
  0%{
    /* 用translateY实现垂直位移，不影响布局 */
    transform: translateY(-100px);
  }
  100%{
    transform: translateY(100px);
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    <title>Training</title>
  </head>
  <body>
    <div class="circle-container">
      <div class="circle" id="one"></div>
      <div class="circle" id="two"></div>
      <div class="circle" id="three"></div>
      <div class="circle" id="four"></div>
      <div class="circle" id="five"></div>
    </div>
    <script type="module" src="training.js"></script>
  </body>
</html>

关键修改说明 #

• 用transform替代top：translateY()是基于元素自身位置的位移，不会改变元素在flex容器中的布局，完美解决堆叠问题
• 调整动画延迟：把延迟改成递增的正数，蛇形弹跳的顺序更直观（从第一个到最后依次弹跳），你也可以根据需求调整延迟数值
• 优化位移范围：容器高度300px，圆形直径100px，上下各留100px的位移空间，动画效果更协调

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