title: HTML5 -webkit-transition doesn't work if I set it right before setting something else using javascript on chrome
body: <p>I'm still new to HTML5 but I faced a very strange behavior. (In Chrome)</p>
  
  <p>The following code works on chrome:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Webkit-transition test&lt;/title&gt;
      &lt;script language="javascript" &gt;
          function addSpan()
          {
              document.getElementById("someDiv").innerHTML = "&lt;span id=\"t47\" &gt;A new span!&lt;/span&gt;";
              document.getElementById("t47").className += "letter";
          }
          function moveIt()
          {
              document.getElementById("t47").style["MozTransform"] = "translate(10px,40px)";
              document.getElementById("t47").style["WebkitTransform"] = "translate(10px,40px)";
          }
      &lt;/script&gt;
      &lt;style&gt;
          .letter{
              -webkit-transition: all 1s ease-in-out;
              -moz-transition: all 1s ease-in-out;
              display: inline-block;
              color: red;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="someDiv"&gt;&lt;/div&gt;
  &lt;span class="letter"  id="aaa"&gt;This is an old span&lt;/span&gt;
  &lt;button onclick='addSpan()'&gt;Add Span&lt;/button&gt;
  &lt;button onclick='moveIt()'&gt;Move it!&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However if I move the line:</p>
  
  <pre><code>document.getElementById("t47").className += "letter";
  </code></pre>
  
  <p>to the beginning of the moveIt function, the span just jumps without transitioning</p>
  
  <p>The javascript part would be like this:</p>
  
  <pre><code>&lt;script language="javascript" &gt;
      function addSpan()
      {
          document.getElementById("someDiv").innerHTML = "&lt;span id=\"t47\" &gt;A new span!&lt;/span&gt;";
  
      }
      function moveIt()
      {
          document.getElementById("t47").className += "letter";
          document.getElementById("t47").style["MozTransform"] = "translate(10px,40px)";
          document.getElementById("t47").style["WebkitTransform"] = "translate(10px,40px)";
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>So What is the difference here? These two cases work well on firefox though. I haven't tried IE.</p>
  
  <p>I appreciate any help I can get!</p>