我有一个简单的加载屏幕，我想有一个点出现在文本结束的时间。
不幸的是，我只能让他们眨眼，当我想让一个出现在一个时间，然后重新开始。
我目前使用的是淡入动画，如下所示：

@keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}

字符串
以下是我所拥有的样本：

const App = () => {

  return (
  <h1>
    Loading<span>.</span><span>.</span><span>.</span>
  </h1>
  )
}

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

x

@keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}

span:nth-child(1) {
  opacity: 0;
  animation: fadeIn 500ms infinite;
}
span:nth-child(2) {
  opacity: 0;
  animation: fadeIn 500ms infinite;
  animation-delay: 500ms;
}
span:nth-child(3) {
  opacity: 0;
  animation: fadeIn 500ms infinite;
  animation-delay: 1000ms;
}

<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-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

的字符串
正如你所看到的，目前，它确实一次显示一个，但然后只是让他们三个都 Flink 。我怎么能让他们一次显示一个，然后重新开始？
谢谢你，谢谢