title: Smooth javascript animation
body: <p>Here is some code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style&gt;
  body { margin:0; padding:0; }
  #a {
      position:absolute;
      background:#0FF;
      left:0;
      height:300px;
      width:120px;
  }
  input, #a {
      margin:10px;
  }
  &lt;/style&gt;
  &lt;script&gt;
  function foo() {
      box = document.getElementById('a');
      var computedStyle = box.currentStyle || window.getComputedStyle(box, null);
      box.style.left = parseInt(computedStyle.left) + 10 + 'px';
      setTimeout("foo()",20);
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;input type="button" value="RUN, FORREST, RUN!" onClick="setTimeout('foo()',20)"&gt;
  &lt;div id="a"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see, it animates DIV at page, but animation isn't clear and smooth — border of DIV actually deforming.
  Somebody know how i can make it work correctly?</p>