title: How do I use CSS animations to slide a fixed position element from the bottom of the page to the top?
body: <p><a href="http://jsfiddle.net/cD4Gr/1/" rel="noreferrer">http://jsfiddle.net/cD4Gr/1/</a></p>
  
  <p>This is my animation code:</p>
  
  <pre><code>@-webkit-keyframes silde_to_top {
      0% {
          bottom: 0%;
          top: default;
      }
      100% {
          bottom: default;
          top: 0%;
          z-index: 1000000;
          opacity: 0.5;
      }
  }
  
  #test{
      -webkit-animation-name: silde_to_top;
      -webkit-animation-duration: 5s;
      -webkit-animation-timing-function: ease;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-direction: normal;
      -webkit-animation-delay: 0;
      -webkit-animation-play-state: running;
      -webkit-animation-fill-mode: forwards;
  }
  </code></pre>
  
  <p>currently, the div just auto-starts at the top, instead of sliding to the top. the only thing that animates is the opacity.</p>