css3新增了一个好玩的属性：animation，虽然用它做出来的动画并没有多么炫酷流畅，但是它减少了代码量并且在浏览器性能上有着明显的有点。
animation基本用法是：
animation:name keeping-time animate-function delay times iteration final
/////////注：animation是复合属性，它可以合着用也可以分开写。
第一个参数：name
动画的名字，css3用‘keyframes 关键帧’来定义动画
例子：
@-webkit-keyframes name{
0%{top:0;}
100%{top:10px;}
}
前缀-webkit-表示webkit内核浏览器（Chrome、Safari和opera），上面代码定义了一个动画，名子叫name，效果是使高度从0变化到10,0%~100%为整个过程，也可以定义多段如：0%~20~50%~100%。
第二个参数：animation-duration：
整个动画的持续时间，必须带上时间单位，s或者ms均可；
第三个参数：animation-timing-function：
运动方式（动画方式）的贝赛尔曲线,它的值有：
linear：线性过渡。
ease：平滑过渡。
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
等。
第四个参数：animation-delay：
动画延迟执行的时间，单位也是s或者ms，值得注意的是，即使延迟时间为0，也必须加上时间单位，如果写成直接写成0，在Chrome和Safari(webkit)下是没问题的，但是在FF(gecko)下无效。
例子：
animation-delay:0.5s; 动画开始前延迟的时间为0.5s
第五个参数：times (animation-iteration-count)：
动画循环执行的次数，无单位，infinite为无限循环。
infinite：无限循环
number: 循环的次数
例子：
animation-iteration-count: infinite | number;
第六个参数：animation-direction：
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
如果动画循环，循环的方式是：alternate(偶数次向前播放，奇数次向后播放)、normal(每次都向前播放)。
第七个参数：animation-fill-mode：
动画的最后（达到100%）时的状态，取值有：backward（回到初始状态）、forwards（停在最终状态）、none、both。
每个参数也可以单独写，最后用的时候记得加浏览器前缀。
例：
.classname{
-webkit-animation:name 6s linear 0ms infinite normal forwards;
-moz-animation:name 6s linear 0ms infinite normal forwards;
-o-animation:name 6s linear 0ms infinite normal forwards;
animation:name 6s linear 0ms infinite normal forwards;}
将不带前缀的写在最后面好处是等到animation被所有浏览器认可，可以摈弃前缀的时候可以覆盖前面的样式。
第八个参数：animation-play-state 检索或设置对象动画的状态
animation-play-state:running | paused;
running:运动
paused: 暂停
animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行
网友评论