加载屏幕上的三点 CSS 动画

Question

我有一个简单的加载屏幕，我希望在文本末尾一次出现一个点。

不幸的是，当我希望一次出现一个然后重新开始时，我只能让它们闪烁。

我目前正在使用如下所示的淡入动画：

@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')
);

@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>

如您所见，目前它确实一次显示一个，但随后三个都在闪烁。我怎样才能让它们一次显示一个，然后重新开始？

谢谢！

Answer 1

用更少的代码更简单的想法：

.loading {
  font-weight: bold;
  display:inline-block;
  font-family: monospace;
  font-size: 30px;
  clip-path: inset(0 3ch 0 0);
  animation: l 1s steps(4) infinite;
}

@keyframes l {
  to {
    clip-path: inset(0 -1ch 0 0)
  }
}

<div class="loading">Loading...</div>

加载屏幕上的三点 CSS 动画

Triple dot CSS animation on a loading screen

css

css-animations

reactjs