title: Cropping an image equally from top to bottom
body: <p>I'm trying to achieve a small animated intro to a website. Basically I want a centralised image to crop equally from top and bottom and then move up to the top of the screen.</p>
  
  <p>So far I have the following: <a href="http://dk8.co/animation.html" rel="nofollow">http://dk8.co/animation.html</a></p>
  
  <p>This is using the following CSS:</p>
  
  <pre><code>      #pic {
          position:absolute;
          top:0%;
          width: 100%;
          height: 200px;
          left: 0px;
          background:url(web/images/AM-title.jpg) no-repeat;
           -moz-background-size:100% auto;
           -webkit-background-size:100% auto;
           -webkit-background-position:0% auto;
           background-size:100% auto;
           -o-background-size: 100% auto;
          -webkit-animation-name: move;
          -webkit-animation-duration: 2s;
          -webkit-animation-iteration-count: 1;
          -webkit-animation-timing-function: ease-in;
      }
  
  
  
  
      @-webkit-keyframes move {
      0% {
          top: 50%;
          height: 400px;
      }
  
          50% {
          top: 50%;
          height: 300px;
      }
  }
  </code></pre>
  
  <p>However, the problem is that the "cropping" is occurring from just the bottom up rather than from top and bottom.</p>
  
  <p>Is there any way of achieving an equal cropping effect on the top and the bottom?</p>