title: css transition initial value
body: <p>I would like to animate a div from right to left. </p>
  
  <p>I cannot use a stylesheet because I don't know the amount of px. </p>
  
  <p>If I set the initial value (where the animation starts from) and the end-value in the same function, it doesn't work. </p>
  
  <pre><code>//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);
  </code></pre>
  
  <p>as you can see in this fiddle: <a href="http://jsfiddle.net/c66Fb/" rel="nofollow">http://jsfiddle.net/c66Fb/</a></p>
  
  <p>what is a better solution to this than using a timeout?</p>