Css 从上到下平均剪切图像

我试图实现一个小动画介绍到一个网站。基本上，我希望一个集中的图像从顶部和底部平均裁剪，然后向上移动到屏幕顶部

到目前为止，我有以下几点：

这是使用以下CSS：

      #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;
    }
}

然而，问题是“裁剪”是从下至上而不是从上到下发生的

有没有办法在顶部和底部实现相同的裁剪效果？

我是为Prototype.js编写的。你可以收集代码，看看它是如何工作的

---

基本上，您可以同时移动元素的位置和背景位置。

非常简单的解决方案是将50%指定给背景位置属性，或者简单地将50%添加到上面的速记中：

background:url（web/images/AM title.jpg）50%50%不重复

以下是一个工作示例：