title: Animating bar graphs in CSS
body: <p>I want to achieve an animated bar graph similar to the one seen on the header of <a href="http://www.chartjs.org/" rel="nofollow">http://www.chartjs.org/</a></p>
  
  <p>It is a visual animation of just a div, so its not pulling any raw data.</p>
  
  <p>I've put together some CSS animation code, but this code increases the div's height from the bottom rather than the top. Could someone help sort this out so it animates like a normal graph, increasing upwards in height, not downwards in CSS2 / CSS3?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt; 
  
  
  .div0 {
      background-color: blue;
      width: auto;
      height: auto;
      margin-left: 200px;
  }
  
  .div1 {  
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: blue;
      margin:auto;
      vertical-align: middle;
      position: relative;
      float: left;
      -webkit-animation: myfirst 2s infinite ; /* Chrome, Safari, Opera */
      animation: myfirst 2s infinite;
      -webkit-transition-timing-function: ease-in-out; /* Safari and Chrome */
      transition-timing-function: ease-in-out;
  }
  
  
  /* Chrome, Safari, Opera */
  @-webkit-keyframes 
  
  myfirst {
      from, 15%  {background:red; height:120px}
      26%, 42%  {background:red; height:210px} 
      42%, 75%  {background:red; height:190px}
      75%, 100% {background:red; height:120px}
      }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class = "div0"&gt;
  &lt;div class = "div1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>