如何优化CSS线性平移动画？解决飞船圆点旋转卡顿问题

我用纯CSS制作飞船时，给底部的4个圆点添加了类似marquee的滚动动画，但动画在周期结束时会突然中断，无法实现流畅的循环效果，该如何修改？

修改思路 #

当前动画的问题在于起始状态和结束状态无法无缝衔接，导致循环时出现跳变。要实现无停顿的循环，需要让动画首尾视觉一致，具体调整如下：

• 将所有圆点放入统一容器，通过移动整个容器实现滚动，避免单个圆点的动画衔接问题
• 复制一组相同圆点，当原圆点组滚出视野时，复制的圆点组刚好接上，形成无限循环视觉效果
• 调整动画位移距离，让容器滚动距离等于单个圆点组的总宽度，确保结束状态和起始状态完全对齐

修改后的代码 #

HTML部分 #

<div class="spaceship">
  <div class="glass">
    <div class="bottom">
      <div class="points-group">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
      </div>
      <!-- 复制一组圆点用于衔接 -->
      <div class="points-group">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
      </div>
    </div>
  </div>
</div>

CSS部分 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #333;
}

.spaceship {
  position: absolute;
  height: 200px;
  aspect-ratio: 1;
}

.spaceship .glass {
  height: 100px;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.19);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6.8px);
  -webkit-backdrop-filter: blur(6.8px);
  border-radius: 50%;
}

.spaceship .bottom {
  position: absolute;
  height: 30px;
  width: 100px;
  border-radius: 20px;
  background-image: linear-gradient(
    to right,
    #af2323,
    #b5242e,
    #bb2739,
    #c02a44,
    #c42e4f
  );
  bottom: 0px;
  display: flex;
  align-items: center;
  overflow-x: hidden;
}
/* 圆点组容器，设置flex布局保持间距 */
.points-group {
  display: flex;
  gap: 10px;
  /* 单个组的宽度：4个圆点（每个20px） + 3个间距（每个10px）= 110px */
  width: 110px;
  animation: move 4s linear infinite;
}
.point {
  height: 20px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
}
@keyframes move {
  0% {
    /* 起始位置：整个组在容器右侧外 */
    translate: 0 0;
  }
  100% {
    /* 结束位置：整个组向左滚动一个自身宽度的距离，刚好让复制的组衔接上 */
    translate: -100% 0;
  }
}

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