加载屏幕上的三点 CSS 动画答案

【问题标题】：Triple dot CSS animation on a loading screen加载屏幕上的三点 CSS 动画
【发布时间】：2021-08-08 20:13:15
【问题描述】：

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

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

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

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

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

谢谢！

【问题讨论】：

也可以参考这里codepen.io/nzbin/pen/GGrXbp

标签： css reactjs css-animations

【解决方案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)
  }
}

&lt;div class="loading"&gt;Loading...&lt;/div&gt;

【讨论】：