求教css3 animation问题

DOM结构

`    <div class="wrap">
        <div class="content"></div>
    </div>`

CSS样式及动画
全选复制放进笔记
.wrap{
    position: relative;
    width: 100px;
    height: 400px;
    background: blue;

}
.content{
    position: absolute;
    width: 90px;
    height: 200px;
    background: red;
    top: 0px;
          -moz-animation:toTop 2s;
                      -webkit-animation:toTop 2s;
                      -o-animation:toTop 2s;
}
    @keyframes toTop{
         0%{top:0px;},
         100%{top: 87px}
      }

为什么动画不运行？什么原因造成的啊