css3中动画兼容版

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