title: Stop animation from right to left
body: <p>I want this progress bar to animate only from left to right, starting from text. After animation ends from right to left, it starts animating from right to left, from some point. Note, I need to use the flexbox and width for text.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table-bars .bar-box .text {
   height: 100%;
   margin: 0 30px 0 200px;
   width: 200px;
      text-align:right;
  }
  .bar-box {
      margin-bottom:20px;
     }
  .table-bars div .progress {
      background-color: #0071b9;
      border-radius: 20px;
      border-right: 13px solid rgb(0, 173, 239);
      -webkit-animation: progressBar 2s ease-in-out;
      -webkit-animation-fill-mode:both;
      -moz-animation: progressBar 2s ease-in-out;
      -moz-animation-fill-mode:both;
      height: 20px;
  }
  
  @-webkit-keyframes progressBar {
    0% { width: 0; }
    100% { width: 100%; }
  }
  
  @-moz-keyframes progressBar {
    0% { width: 0; }
    100% { width: 100%; }
  }
  
  .bar-box {
   display: flex;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table-bars"&gt;
       &lt;div class="bar-box"&gt;
             &lt;div class="text"&gt;&lt;span&gt;TEXT&lt;/span&gt;&lt;/div&gt;
             &lt;div class="progress"&gt;&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="bar-box"&gt;
             &lt;div class="text"&gt;&lt;span&gt;Another TEXT&lt;/span&gt;&lt;/div&gt;
             &lt;div class="progress"&gt;&lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>