title: CSS animation weird jumping dots
body: <p>I have the following CSS class for my Loader:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>And I use it like that:</p>
  
  <pre><code>&lt;div class="loading centered"&gt;
      Loading your results
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see <a href="http://plnkr.co/edit/zs1PwOBxGqKklUxYuBpy?p=preview" rel="nofollow">here</a>, the dots are moving the whole label to the left. How do I fix that?</p>