CSS3 animation 属性

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;       当鼠标经过时动画停止，鼠标移开动画继续执行