title: CSS transition doesn't work on DOM manipulation
body: <p>Let's say I've got some block with <code>left</code> style property defined and with <code>transition</code> for that property:</p>
  
  <pre><code>&lt;div id="caret" class="caret" style="left: 20px"&gt;&lt;/div&gt;
  
  .caret {
      transition: left 0.3s;
  }
  </code></pre>
  
  <p>Okay, now when I change <code>left</code> via <code>$.css()</code> I've got everything transitioning perfectly:</p>
  
  <pre><code>$('#caret').css('left', '100px');
  </code></pre>
  
  <p>But when I move the block from one place to another in DOM and then change <code>left</code>, nothing transitioning, it just immediately jumps to the given value:</p>
  
  <pre><code>$('#caret').appendTo('#container').css('left', '50px');
  </code></pre>
  
  <p>Hovever, if I wait a bit and change <code>left</code> again, transition is back again. It feels like it needs some time to prepare.</p>
  
  <p>I've created a simple showcase to demonstrate this issue: <a href="http://jsfiddle.net/L624m/2/" rel="nofollow">http://jsfiddle.net/L624m/2/</a></p>
  
  <p>So, why is that happening?</p>