Pass in variable for CSS3 Animation
<p>I have a progress bar that I want to move according to the current width. I can get it to move to a static width, but I have no idea how to pass in the new width to set it to.</p>

<p>The CSS is</p>

<pre><code>@media all and (min-width: 800px) {
    .checkout-bar li.active:after {
      @include green-stripe;
      @include inner-shadow;
      content:"";
      height: 15px;
      left: 50%;
      width: 0%;
      float: left;
      position: absolute;
      top: -50px;
      z-index: 0;
      -webkit-animation: myanimation 3s 0 forwards;
    }
    @-webkit-keyframes myanimation {
      from {
        width: 0;
      }
      to {
        width: 50%; //I would like this to be a variable
      }
   }
</code></pre>

<p>This is the html:</p>

<pre><code> &lt;div className="checkout-wrap"&gt;
    &lt;ul className="checkout-bar"&gt;
      &lt;li className="visited"&gt;Received Message&lt;/li&gt;
      &lt;li className="visited"&gt;Splitting Message&lt;/li&gt;
      &lt;li className="visited"&gt;Publish on Call&lt;/li&gt;
      &lt;li className="visited"&gt;Ready to Send&lt;/li&gt;
      &lt;li className="active" style={{'width': iOSPercent + '%'}}&gt;Sending Message&lt;/li&gt; // this should pass in the width
      &lt;li className="next"&gt;Done&lt;/li&gt;
   &lt;/ul&gt;

&lt;/div&gt;;
</code></pre>

<p>Thanks in advance,</p>