keyframe,animation のパラメーターをinputtypeから設定したい

Boxの横幅を　0％50pxから入力した値に変化させるというアニメーションを作成したいのですが
取得した入力値をkeyframeのパラメーターをして設定する方法がわかりません。

こちらがHTMLです。

<dl>
<dt>0%</dt><dd>50px</dd>
<dt>100%</dt><dd><input type="text" name="w100" id="w100" size="5">px</dd>
</dl>
<input type="button" value="Set" onclick="set();">
</form>
<div class="box"></div>

書きかけのjqueryです。取得した値をkeyframeの100%のwidthにどのように入れいればよいのかご教授ください。

function set(){
var a=$("#w100").val();         //valueの取得
var b=a+"px";                   //単位をつける        
$("div").addClass("c"); 
}

下記のCSSは入力値が200をしたときのものです。

<style>
.box{   margin:10px; padding:0;  height:50px; background:#fcc;
animation-name:anim;
animation-duration:3s;
animation-timin-function:ease-in;
animation-delay:1s;
animation-fill-mode:both;
-webkit-animation:a 3s ease-in 1s both;
}
.c{
@keyframes anim {
         0%     {height:50px; width:50px; } 
         100%   {height:50px; width:200px; }
} 
}
</style>