title: Transition animation using inline styles (CSS or jQuery)
body: <p>I'm using the progress bar that comes with the Ninja Forms <a href="https://ninjaforms.com/extensions/multi-part-forms/" rel="nofollow noreferrer">Multi-Part Form addon</a> and here's the setup of the progress bar.</p>
  
  <pre><code>&lt;div class="nf-progress-container"&gt;
      &lt;div class="nf-progress" style="width: 0%;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I advance to each subsequent part of the multi-part form, some JS or jQuery changes the width of the inline <code>style</code> attribute in the <code>.nf-progress</code> <code>div</code> and the progress bar fills in with each step completed.</p>
  
  <p>To help you visualize, here's what my UI looks like with styling.</p>
  
  <p><a href="https://i.stack.imgur.com/EHrJG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EHrJG.jpg" alt="Here&#39;s what my styles progress bar looks like, to help you visualize it"></a></p>
  
  <p>I'd like for the progress bar to animate the <code>.nf-progress</code> div as each step is completed. I thought it was going to be as simple as <code>transition: width 1s ease;</code>, but it's not working (even with <code>-webkit-transition</code>). Here's what I tried.</p>
  
  <pre><code>.nf-progress-container .nf-progress {
      transition: width 1s ease;
      -webkit-transition: width 1s ease;
  }
  </code></pre>
  
  <p>I did a little more investigating and found that you can't animate inline styles with the <code>transition</code> css property. Not sure why, but you can't do it, apparently.</p>
  
  <p>I kept digging and found an article that gets me closer <a href="https://css-tricks.com/animate-to-an-inline-style/" rel="nofollow noreferrer">here</a> with pure css animation keyframes. </p>
  
  <pre><code>@-webkit-keyframes progress-bar {
     0% { width: 0; }
  }
  @-moz-keyframes progress-bar {
     0% { width: 0; }
  }
  @keyframes progress-bar {
     0% { width: 0; }
  }
  
  .nf-progress-container .nf-progress { 
    -webkit-animation: progress-bar 1s;
    -moz-animation: progress-bar 1s;
    animation: progress-bar 1s;
  }
  </code></pre>
  
  <p>The benefit here is that I actually get <em>some</em> kind of animation. The problem with this approach though is that the animation starts at <code>width:0%</code> for every step of the progress bar. I want the element to transition from the previous width, whatever it was, to the new inline style width.</p>
  
  <p>Does anyone know how to do this with CSS or if there is a way to accomplish this with jQuery?</p>