.mymove{

    display:block;

    postion:relative;

    -webkit-animation-name: mymove;
    animation-name: topappcur;
    -webkit-animation-duration: .5s;  
    animation-duration: .5s;  /*持續時間*/
    -webkit-animation-timing-function: linear;   /*動畫從頭到尾速度是相同的*/
    animation-timing-function: linear;
    -webkit-animation-delay: 0s; 
    animation-delay: 0s;
    -webkit-animation-iteration-count:1; 
    animation-iteration-count:1;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes mymove
{
    from {margin-top:-100%;}
    to {margin-top:0%;}
}
@-webkit-keyframes mymove{  
    from {margin-top:-100%;}
    to {margin-top:0%;}

}

注：

animation-name   規定需要繫結到選擇器的keyframe名稱

animation-duration 規定完成動畫所花的時間，以秒或毫秒計

animation-timing-function 規定動畫的速度曲線

animation-delay  規定動畫開始之前的延遲

animation-iteration-count  規定動畫應該播放的次數

animation-derection 規定是否應該輪流反向播放動畫

相容性

IE10,Firefox、Opera支援@keyframes規則和animation屬性

IE9及更早版本，不支援@keyframes規則和animation屬性

用百分比來規定發生的時間，0%為開始時間，即為from；100%為結束時間，即為to；也可以定義中間的某些效果。

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}