CSS动画奇怪的跳点

Question

我的加载程序有以下 CSS 类:

.loading{
  color:black;
  position:fixed;
  width: 270px;
  height:100px;
  font-size:20px;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition: 1s ease-out;
  opacity:1;
}



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

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

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


.centered{
  vertical-align:middle;
  text-align:center;
  align-items: center;
  justify-content: center;
}

我是这样使用它的:

<div class="loading centered">
    Loading your results
</div>

如你所见here ，点将整个标签向左移动。我该如何解决？

Answer 1

您将伪设置为 position: absolute 并将其向右移动 (left: 100%)

Updated Plunker

.loading{
  color:black;
  position:fixed;
  width: 180px;              /* changed  */
  height:100px;
  font-size:20px;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition: 1s ease-out;
  opacity:1;
}    
  .loading:after {
    overflow: hidden;
    display: inline-block;
    position: absolute;      /* added  */
    left: 100%;              /* added  */
    vertical-align: bottom;
    animation: ellipsis steps(4,end) 900ms infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
    width: 0px;
  }