css3动画animation

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
animation-name:规定需要绑定到选择器的 keyframe 名称。
animation-duration:规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function:规定动画的速度曲线。
animation-delay:规定在动画开始之前的延迟。
animation-iteration-count:规定动画应该播放的次数。
animation-direction:规定是否应该轮流反向播放动画。
animation-play-state:规定动画正在运行还是暂停.

div
{
　　width:100px;
　　height:100px;
　　background:red;
　　position:relative;
　　animation:mymove 5s infinite;
　　-webkit-animation:mymove 5s infinite; 

　　-o-animation:mymove 5s infinite(指的是无限循环);

}

@keyframes mymove
{
　　from {left:0px;}
　　to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
　　from {left:0px;}
　　to {left:200px;}
}

@-o-keyframes mymove{

　　from{left:0px;}

　　to{left:200px;}

}

或者如下所写：

@keyframes mymove
{
　　0%{left:0px;}
　　50%{left:200px;}

　　100%{left:0px;}

}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
　　

　　0%{left:0px;}
　　50%{left:200px;}

　　100%{left:0px;}

}

@-o-keyframes mymove{

　　

　　0%{left:0px;}
　　50%{left:200px;}

　　100%{left:0px;}

}