title: How do I make my div scale to larger than it's original size using css animation?
body: <p>I have a div which needs to start as a square, 70px x 70px and scale to a larger rectangle 140px x 210px 
  For some reason the div won't scale to larger than it's original size. How can i achieve this?</p>
  
  <p>This is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;div id="tab"&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#tab {
  -webkit-animation: enlarge 5s forwards;
  width: 140px;
  height: 210px;
  position: absolute;
  left: 15px;
  top: 0px;
  background-color: red;
  }
  
  @-webkit-keyframes enlarge{
  0% {-webkit-transform: scale(1,1)};
  100% {-webkit-transform: scale(2,4)};
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/kacmuhuw/1/" rel="nofollow">http://jsfiddle.net/kacmuhuw/1/</a></p>
  
  <p>EDIT:::::
  CORRECT FIDDLE:</p>
  
  <p><a href="http://jsfiddle.net/kacmuhuw/6/" rel="nofollow">http://jsfiddle.net/kacmuhuw/6/</a></p>