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

我正在尝试制作省略号动画，并且想知道 CSS 动画是否可以实现...

所以它可能就像

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

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

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

稍微修改一下的版本怎么样@xec 的回答 https://stackoverflow.com/a/13015019/1660815: http://codepen.io/thetallweeks/pen/yybGra http://codepen.io/thetallweeks/pen/yybGra

CSS 动画使用steps. 请参阅 MDN 文档 https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#The_steps()_class_of_timing-functions

.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 的答案对点有更多的滑入效果，同时这允许点立即出现。