title: Use CSS3 Animation to move div from top to bottom of screen?
body: <p>I'm trying to get a div to expand from the top of the page to the bottom. When the animation starts the div will be hidden (height 0%), till it fills the page at 100%. I tried to do it like so, but none of it seems to be working:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;About Me&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="stylesheets/main.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="bar"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    *
  {
      box-sizing: border-box;
  }
  
  body
  {
      height: auto;
      width: auto;
      direction: ltr;
      z-index: 1;
      background-color: #fff;
  }
  
  #bar
  {
      position: relative;
      top: 0px;
      left: 0px;
      width: 5%;
      background-color: #3b5598;
      display: block;
      -webkit-animation: bar 7s ease;
  }
  
  @keyframes bar
  {
    0% {
      top: 0%;
    }
    100% {
      top: 100%;;
    }
  }
  </code></pre>
  
  <p>I've had animations working before from left to right, but nothing coming from the top to bottom. I've extensively google'd this but to no avail. Thanks</p>