求教css3 animation问题

Question

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

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

Answer 1

@keyframes toTop{
     0%{top:0px;}
     100%{top: 87px}
}

关键帧之间不用逗号

Answer 2

-moz-animation:toTop 2s; -webkit-animation:toTop 2s; -o-animation:toTop 2s;

这个属性应该缺参数了，动画类型，动画结束之后停留在结束时候的状态还是回到初始状态等应该都要写。

Answer 3

一楼说的对，亲测可行