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