加载页面的三点CSS逐次显示循环动画实现问题

这个问题很常见，你当前的动画只实现了「淡入」的单一阶段，再加上infinite循环，就导致每个点会一直重复“透明→显示”的闪烁效果。要实现逐个显示→全部显示→全部消失→重新开始的完整循环，我们需要给每个点设计包含「淡入-停留-淡出」的完整动画周期，让三个点的节奏完美衔接。

问题根源拆解 #

你定义的fadeIn动画只有从opacity:0到opacity:1的过程，没有处理“淡出回到初始状态”的环节。当动画无限循环时，每个点在显示后会立刻重新执行淡入，自然就变成了持续闪烁。

解决方案 #

我们重新定义一个完整的动画周期，再给每个点设置对应的延迟，让它们的动画在一个总周期内依次启动，最后同步回到透明状态，触发下一轮循环：

1. 定义完整的加载点动画

创建一个包含「初始透明→淡入显示→保持显示→淡出透明」四个阶段的动画：

@keyframes loadingDot {
  /* 初始和结束状态都是透明，确保循环能衔接 */
  0%, 100% { opacity: 0; }
  /* 淡入完成后保持显示 */
  20%, 80% { opacity: 1; }
}

2. 配置每个点的动画参数

总动画时长设为1500ms（对应三个点各延迟500ms的节奏），然后给每个点设置不同的启动延迟：

.loading-text span {
  opacity: 0;
  /* 总周期1500ms，无限循环，结束后回到初始状态 */
  animation: loadingDot 1500ms infinite forwards;
}

/* 第一个点无延迟，直接启动 */
.loading-text span:nth-child(1) {
  animation-delay: 0ms;
}

/* 第二个点延迟500ms，和第一个点的淡入节奏衔接 */
.loading-text span:nth-child(2) {
  animation-delay: 500ms;
}

/* 第三个点延迟1000ms，和第二个点的淡入节奏衔接 */
.loading-text span:nth-child(3) {
  animation-delay: 1000ms;
}

3. 完整的React代码示例

const App = () => {
  return (
    <h1 className="loading-text">
      Loading<span>.</span><span>.</span><span>.</span>
    </h1>
  )
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

效果说明 #

最终你会看到这样的循环：
. → .. → ... → （所有点消失）→ . → .. → ...
每个点的动画节奏是：淡入用300ms（20%的1500ms），保持显示900ms，最后用300ms淡出，三个点依次启动后，会在1500ms时同步回到透明状态，无缝开启下一轮循环。

个性化调整 #

如果想要更慢/更快的节奏，只需要修改animation里的总时长，同时按比例调整animation-delay的数值即可；要是想让停留时间更长，也可以修改@keyframes里的百分比（比如把80%改成90%，延长显示阶段）。

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