有没有办法用 CSS 动画制作省略号的动画？

Question

我正在尝试制作省略号动画，并想知道是否可以使用 CSS 动画…

所以它可能就像

Loading...
Loading..
Loading.
Loading...
Loading..

基本上就这样继续下去。有任何想法吗？

编辑：像这样：http: //playground.magicrising.de/demo/ellipsis.html

原文由 Rey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

@xec 答案 的略微修改版本怎么样： http ://codepen.io/thetallweeks/pen/yybGra

使用 steps 的 CSS 动画。 查看 MDN 文档

 .loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
  animation: ellipsis steps(4, end) 900ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 40px;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 40px;
  }
}

 <h1 class="loading">Loading</h1>

@xec 的答案对点有更多的滑入效果，而这允许点立即出现。

原文由 thetallweeks 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我完全按照 上面@CodeBrauer 所做的非常干净，但是因为我的文本是 text-align: center （这也适用于 right ）而且我不希望文本每次都移动添加了一个句点，我添加了“标点空格”：

 <style>
    .loading::after {
      display: inline-block;
      animation: dotty steps(1,end) 1s infinite;
      content: '';
    }

    @keyframes dotty {
      0%   { content: '\2008\2008\2008'; }
      25%  { content: '.\2008\2008'; }
      50%  { content: '..\2008'; }
      75%  { content: '...'; }
      100% { content: '\2008\2008\2008'; }
    }
</style>
<div class="loading">Loading</div>

原文由 lanewinfield 发布，翻译遵循 CC BY-SA 4.0 许可协议