I would like to animate a div from right to left.

I cannot use a stylesheet because I don't know the amount of px.

If I set the initial value (where the animation starts from) and the end-value in the same function, it doesn't work.

//DOES NOT WORK
$("#hi").css({"width" : "200px", "transform" : "translateX(500px)"});
$("#hi").css({"transition" : "all 5s ease-out", "transform" : "translateX(0px)"});

//WORKS
$("#alsohi").css({"width" : "200px", "transform" : "translateX(500px)"});
setTimeout(function(){
    $("#alsohi").css({"transition" : "all 5s ease-out", "transform" : "translateX(0px)"});
}, 50);

as you can see in this fiddle: http://jsfiddle.net/c66Fb/

what is a better solution to this than using a timeout?