问传入CSS3动画的变量

EN

@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
      }
   }

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

</div>;