8、CSS 3的动画设计

动画的基本原理：改变属性值（任何属性都可以），同时给一个持续时间，每一个小时间段改变一点，直到持续时间结束，属性修改全部完成。这就形成了动态效果。
一、CSS 3 新增了一些用来实现动画效果的属性。

可以实现以前通常需要使用javascript或者flash才能实现的效果。
比如：对HTML元素进行平稳 缩放 旋转 倾斜 以及添加过渡效果。并且可以将这些组合成动画效果来进行展示

1、2D转换  
语法格式：
transorm:值
none
matrix(<n>,<n>,<n>,<n>,<n>,<n>)  矩阵变换
translate 平移      单位像素  px
translateX
translateY
rotate  旋转           单位 度 deg
scale 缩放        单位 无 倍数比如 0.7
scaleX
scaleY
skew 倾斜              单位 度 deg
skewX
skewY
注：主流浏览器没有支持标准的transform属性，需要加前缀

2、以上转换的中心默认都是元素的中心，可以通过下列属性改变转换的中心点（原点）
transform-origin
值：
<percentage>        用百分比指定坐标值，可以为负
<length>        用长度值指定坐标值，可以为负
left            指定原点的横坐标为left，居左
center            指定原点的横坐标为center
right            指定原点的横坐标为right
top            以下三个为指定原点的纵坐标。
center
bottom
注：主流浏览器没有支持标准的transform-origin属性，需要加前缀

3、过渡效果
transition属性。
该属性可以控制HTML元素的某个属性发生改变时经历的时间，并且以平滑渐变的方式发生改变，从而形成动画效果。

[transition-property] || [transition-duration] || [transiton-timing-function] || [transition-delay]
用于指定参与过渡的属性
用于指定过渡持续的时间
用于指定过渡的动画类型
用于指定过渡的延迟时间

注：注：主流浏览器没有支持标准的transition属性，需要加前缀

3.1指定过渡持续时间：
tranistion-duration:<time> [,<time>] *
说明：如果存在多个属性值，以逗号“,”进行隔开。
注：主流浏览器没有支持标准的tranistion-duration属性，需要加前缀

3.2指定参与过渡的属性
transition-property:all | none | <property> [,< property >] *
说明：
默认值，表示所有可以进行过渡的属性。
表示不指定过渡的属性
表示指定要进行过渡的属性。可以同时指定多个属性值，以逗号“,”进行分隔

注：主流浏览器没有支持标准的transition-property属性，需要加前缀

3.3指定过渡的动画类型

transition-timing-function: linear | ease | ease-in | ease-out| ease-in-out | cubic-bezier(x1,y1,x2,y2) [如果有多个属性只需要再重复]

linear:线性过度，匀速加速==贝塞尔曲线（0.0,0.0,1.0,1.0）
ease:平滑过渡，过渡的速度会慢慢的慢下来==(0.25,0.1,0.25,1.0)
ease-in:由慢到快
ease-out：由快到慢
ease-in-out：先加速再减速
cubic-bezier(x1,y1,x2,y2) 值都在0-1之间，或者无效。

注：主流浏览器没有支持标准的transition-timing-function属性，需要加前缀


3.4指定过渡的延迟时间
过渡延迟多长时间才开始
transition-delay:<time> [,<time>] *
time：单位s，值为数字
如果存在多个属性值，以逗号隔开，

注：主流浏览器没有支持标准的transition-delay属性，需要加前缀


4、Animation 动画
Animation动画允许开发者定义多个关键帧，而且浏览器会自动计算并插入关键帧之间的虚拟关键帧，从而形成比较流畅的动画效果。
步骤：在实现Animation动画时，首先需要定义关键帧，然后应用动画的相关属性来执行变化。

4.1 关键帧
@keyframes name
{
    <keyframes-blocks>
}
注：需要添加前缀比如 ：@-moz-keyframes
name：定义一个动画名称，该动画名称被animation-name属性所使用。

<keyframes-blocks>:定义动画在不同时间段的样式规则。包括两种形式
形式A:
from
{
属性1：值1;
属性2：值2;
属性4：值3;
属性4：值4;
....
属性n：值n;
}
to
{
属性1：值1;
属性2：值2;
属性4：值3;
属性4：值4;
....
属性n：值n;
}
形式B:
百分比1
{
属性1：值1;
属性2：值2;
属性4：值3;
属性4：值4;
....
属性n：值n;
}
百分比2
{
属性1：值1;
属性2：值2;
属性4：值3;
属性4：值4;
....
属性n：值n;
}
....
百分比n
{
属性1：值1;
属性2：值2;
属性4：值3;
属性4：值4;
....
属性n：值n;
}
注：百分比为0%-100%;
4.2动画属性 animation
要实现Animation动画，在定义了关键帧以后，还需要使用动画的相关属性来执行关键帧的变化。
CSS 3 为Animation动画提供了下面的属性。
animation:复合属性，用于指定对象所应用的动画特效
animation:-name：用于指定对象所应用的动画名称
animation-duration：持续时间，单位为s
animation-timing-function:用于指定对象动画的过渡类型，其值与transition-timing-function属性值相同。
animation-delay
animation-iteration-count：用于指定对象动画的循环次数，infinite表示无限次循环。
animation-direction：用于指定对象动画在循环中是否反向运动，normal表示正常方向，alternate表示正常与反向交替
animation-play-state：用于指定对象动画的状态，值为running表示运动 pasued表示暂停
animation-fill-mode：用于指定对象动画时间之外的状态。比如开始时，
注：最好都加前缀    ，使用动画可以形成任何想要的效果（因为可以改变任何元素的任何属性，这也是javascript实现
动态效果的原理）