css3 annimation - 动画
自从css3面市以来，广受大家关注，也慢慢地被大家普及，工作中很多时候如果不考虑ie的情况下，我相信现在大家很多能用css3写的效果基本已经放弃了用js去写了。
那今天带大家认识一下animation属性，它可以帮助我们去实现一些简单的动画。例如点击一个元素，出现一个由小变大的框等网页常见效果都可以用animation去实现这个放大的动画效果。
如果有对transition有了解的同学，理解animation可能会更容易一些，因为transition的属性animation都有。
接下来让我们一起学习animation属性：
动画方法@keyframe
首先，如果想要用动画必须先创建一个动画的具体方法，简称动画方法。
通常我们通过@keyframe 属性去创建动画方法：
语法：
@keyframes IDENT {
from { Properties:Properties value; }
Percentage { Properties:Properties value; }
to { Properties:Properties value; }
}
这就好比我们在写js函数的时候写了一个funciton，之后再利用animation去调用这个方法。
接下来我们就认识一下animation，看一下怎么去调用一个动画方法：
animation
属性：设置对象所应用的动画特效
语法：
animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]*
默认值：以每个单独属性的默认值为准
取值：
[ animation-name ]：
检索或设置对象所应用的动画名称
[ animation-duration ]：
检索或设置对象动画的持续时间
[ animation-timing-function ]：
检索或设置对象动画的过渡类型
[ animation-delay ]：
检索或设置对象动画延迟的时间
[ animation-iteration-count ]：
检索或设置对象动画的循环次数
[ animation-direction ]：
检索或设置对象动画在循环中是否反向运动
脚本特性（js）：animation。
同样，animation是复合属性，默认值还得看每个具体属性的默认值。
注明一下，简单的一个动画中需要这样的一组参数：
animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]
其中包含：动画名称（keyframe声明的名）、动画时长、动画类型、延时、重复、循环中反向运动这些可选项。
同样如果你不设定某些值例如延、重复、循环中反向运动等 这些都会按默认值去执行。
我们在给一个元素添加动画时可以同时添加几个动画，每组动画之间用 “,” 隔开。
animation-name
属性：设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
- 如果提供多个属性值，以逗号进行分隔。
语法：
animation-name：none | <identifier> [ , none | <identifier> ]*
默认值：none
取值：
none：
不引用任何动画名称
<identifier>：
定义一个或多个动画名称(identifier标识)
脚本特性：animationName
animation-duration
属性：设置对象动画的持续时间
语法：
animation-duration：<time> [ , <time> ]*
默认值：0
取值：
<time>：
指定对象动画的持续时间
脚本特性：animationDuration
animation-timing-function
属性：设置对象动画的过渡类型
语法：
animation-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [ , linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]*
默认值：ease
取值：
linear：
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：
平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
脚本特性：animationTimingFunction
animation-delay
属性：设置对象动画的延迟时间 // 简译多久以后执行这个动画
语法：
animation-delay：<time> [ , <time> ]*
默认值：0
取值：
<time>：
指定对象动画延迟的时间
脚本特性：animationDelay
animation-iteration-count
属性：设置对象动画的循环次数
语法：
animation-iteration-count：infinite | <number> [ , infinite | <number> ]*
默认值：1
取值：
infinite：
无限循环
<number>：
指定对象动画的具体循环次数
脚本特性：animationIterationCount
animation-direction
属性：设置对象动画在循环中是否反向运动
语法：
animation-direction：normal | alternate [ , normal | alternate ]*
默认值：normal
取值：
normal：
正常方向
alternate：
正常与反向交替
脚本特性：animationDirection
实例：
.outer{ width:200px; height:200px; position:relative;margin:100px auto; -webkit-transform-style:preserve-3d; -webkit-animation:roll 3s linear 1s infinite alternate; } /* animation */ @-webkit-keyframes roll{ from {-webkit-transform:rotatey(0deg);} to {-webkit-transform:rotatey(360deg);} }
参考资料：W3CHTML
