title: Trying to use basic Javascript to animate a div and make it bigger but have it grow smoothly
body: <p>so here's my code </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
      #box {
          width: 300px;
          height: 300px;
          background-color: blue;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="box"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>var box = document.getElementById('box');
  
  function changeColor() {
      box.style.width = "600px";
      box.style.height = "600px";
      box.style.background = "red";
  }
  
  box.onclick = setInterval(changeColor, 5000);
  </code></pre>
  
  <p>As you can see it changes in a flash.
  I have the box changing size and color but what i want it to do it gradually. I know its easy in Jquery but I'm trying to further my skills in Javascript, any advice would help, thanks guys and gals.</p>