关于css3动画
参考http://isux.tencent.com/css3/index.html
animation-name 动画名
一、动画名
与@keyframes配合使用，简单的动画可以直接使用关键字from和to，复杂点儿的需要用百分比，如下：
1.使用from ** to
@keyframes demo{
from{width: 0;}
to{width: 100px;}
}
2.用百分比
@keyframes demo{
0%{background: #000000;width: 100px;}
20%{background: #888;width: 120px;}
40%{background: #999;width: 140px;}
60%{background: #ccc;width: 160px;}
80%{background: #F0FFF0;width: 180px;}
100%{background: #FFFF99;width: 200px;}
}
定义好动画，使用时需要用animation
.aaa{
width: 300px;
height: 200px;
background: #FA0000;
color: #fff;
text-align:center;
animation: demo 4s;
}
二、动画时间
animation-duration 检索或设置对象动画的持续时间如果提供多个属性值，以逗号进行分隔。
例子中是用4秒完成
.aaa{
width: 300px;
height: 200px;
background: #FA0000;
color: #fff;
text-align:center;
animation: demo 4s;
}
三、播放方式
animation-timing-function 检索或设置对象动画的过渡类型
值有以下几种：
ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。
linear：线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。
ease-in：渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数。
ease-out：渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数。
ease-in-out：渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数。
step-start：马上转跳到动画结束状态。
step-end：保持动画开始状态，直到动画执行时间结束，马上转跳到动画结束状态。
steps(<number>[, [ start | end ] ]?)：第一个参数number为指定的间隔数，即把动画分为n步阶段性展示，第二个参数默认为end，设置最后一步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，而以animation-fill-mode的设置为动画结束的状态。
cubic-bezier(<number>, <number>, <number>, <number>)：特殊的立方贝塞尔曲线效果。
如下demo:
<div class="bbb">
<button>click2</button>
</div>
.bbb:hover{
animation: demo 1s;
-webkit-animation-timing-function:ease;
-moz-animation-timing-function:ease;
animation-timing-function: ease;
}
四、延时播放时间
animation-dely指定对象延时时间
默认值0表示立即执行，正数为动画延迟一定时间，负数为截断一定时间内的动画。单位为秒(s)或毫秒(s)。
延时0.5秒执行
.bbb:hover{
animation: demo1 2s;
animation-delay: -0.5s;
-webkit-animation-delay: -0.5s;
-moz-animation-delay: -0.5s;
}
五、播放次数
animation-iteration-count设置对象动画的循环次数
取值：
number：自定义动画执行次数，设置值可为0或正整数。
infinite：无限循环。
.bbb:hover{
animation: demo1 1s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
}
六、播放方向
animation-direction检索或设置对象动画循环播放次数大于1次时，动画是否反向运动。
取值：
normal：正常方向。
reverse：动画反向运行,方向始终与normal相反。（FF14.0.1以下不支持）
alternate：动画会循环正反方向交替运动，奇数次（1、3、5……）会正常运动，偶数次（2、4、6……）会反向运动，即所有相关联的值都会反向。
alternate-reverse：动画从反向开始，再正反方向交替运动，运动方向始终与alternate定义的相反。
反方向动画
.bbb:hover{
animation: demo1 1s;
animation-direction: reverse;
-webkit-animation-direction: reverse；
-moz-animation-direction: reverse;
}
六、动画播放后的状态
animation-fill-mode检索或设置对象动画时间之外的状态。
取值：
none：默认值。不设置对象动画之外的状态
forwards：结束后保持动画结束时的状态，但当animation-direction为0，则动画不执行，持续保持动画开始时的状态
backwards：结束后返回动画开始时的状态
both：结束后可遵循forwards和backwards两个规则。
.bbb:hover{
animation: demo1 1s;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
}
七、设置动画状态
animation-play-state
取值：
running：默认值。运动
paused：暂停
.bbb:hover{
animation: demo1 1s;
animation-play-state:running;
-webkit-animation-play-state:running;
-moz-animation-play-state:running;
}
