duration:完成动画所需要的时间（2s 或者 2000ms）
timing-function:完成动画的速度曲线
delay：动画开始之前的延迟
iteration-count：动画播放次数
direction：是否轮流反向播放动画（normal:正常顺序播放，alternate下一次反向播放）如果把动画设置为只播放一次，则该属性没有效果。
使用animation属性制作动画可以更加灵活的设置动画帧，通过不同keyframe（动画帧）的设置，实现很多优雅的效果，keyframe中的百分数是动画完成总时间的比例。
animation是设置总的动画效果，而keyframe中设置上相应的动画名字，然后在keyframe中设置具体的动画效果。当然由于是css3的属性，仍然需要注意它的兼容性，加上必须的前缀。
例子：
<style> div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
1% {left:0px;}
20%{left:200px;}
50% {left:300px;}
100%{left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
1% {left:0px;}
20%{left:200px;}
50% {left:300px;}
100%{left:200px;}
}
</style>
<div></div>
3.Jquery的animate函数
语法：
$(selector).animate(styles,options)
styles:产生动画的css样式和值；
options={ speed:动画的速度（可选参数：slow,normal,fase） easing：动画的速度函数（可选参数：swing，linear） callback：动画完成之后要执行的函数； queue：是否放置在效果队列中，是布尔值，为false则立即开始 specialEasing:styles参数的一个或多个属性映射及对应的easing函数。}
$(myElement).animate({ left: 500,
top: 200
}, {duration:'3000',
specialEasing: {
left: 'swing',
top: 'linear'
}
});
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
可以使用的属性有：（使用比如 "fontSize"来设置，而非 CSS 名称（比如 "font-size"））
backgroundPosition，borderWidth，borderBottomWidth，borderLeftWidth
borderRightWidth，borderTopWidth，borderSpacing
margin，marginBottom，marginLeft，marginRight，marginTop
outlineWidth
padding，paddingBottom，paddingLeft，paddingRight，paddingTop
height，width
maxHeight，maxWidth，minHeight，minWidth
