CSS分步动画失效问题：steps()函数未生效，请求帮助修复

问题描述 #

需要实现粉色圆点在三个灰色圆点上方分步跳动的效果，但当前粉色圆点呈现连续平滑移动的状态，尝试使用steps(3)、steps(3, end)均未达到预期效果。

原因分析 #

问题出在动画关键帧（@keyframes）的定义和steps()函数的配合逻辑上：

• 当前的@keyframes设置了0%、50%、100%三个关键帧，这会把动画拆成两段连续过渡：前0.5秒从left:0移动到left:1.5rem，后0.5秒从left:1.5rem移动到left:3rem。
• steps(3)是作用于整个动画的时间线，但由于中间的50%关键帧强制了一段平滑过渡，steps()的离散拆分逻辑被打断，最终还是呈现连续移动的效果。

修复方案 #

方案1：简化关键帧，依赖steps()实现分步 #

去掉中间的50%关键帧，只保留起始和结束位置，让steps(3)自动将整个移动过程拆分为3个离散步骤：

.DotLoader div {
  position: absolute;
  height: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: pink;
  left: 3rem;
  animation: moveSpinner 1s steps(3, end) infinite;
}

@keyframes moveSpinner {
  0% {
    left: 0;
  }
  100% {
    left: 3rem;
  }
}

方案2：明确定义每一步的关键帧 #

如果需要更精准控制每一步的停留位置，可以直接定义多组关键帧，让动画在每个目标位置停留：

.DotLoader div {
  position: absolute;
  height: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: pink;
  left: 3rem;
  animation: moveSpinner 1s steps(3, end) infinite;
}

@keyframes moveSpinner {
  0% { left: 0; }
  33.33% { left: 0; }
  33.34% { left: 1.5rem; }
  66.66% { left: 1.5rem; }
  66.67% { left: 3rem; }
  100% { left: 3rem; }
}

两种方案都能实现粉色圆点分步跳动的效果，方案1更简洁，方案2适合需要自定义每步停留时长的场景。

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