css3动画整理
css3动画主要常用的属性有 变形（transform），转换（transition），动画（animation）三种。
变形（transform）主要有以下几种方式：
旋转rotate：rotate((<number>) transform:rotate(20deg);
扭曲skew：skew(x,y) transform:skew(30deg,10deg):
缩放scale:scale(x,y) transform:scale(30deg,10deg):
移动translate :translate(x,y) transform:translate(100px,0)
矩阵变形matrix:matrix(<number>, <number>, <number>, <number>, <number>, <number>)
改变元素的基点位置transform-origin:transform-origin(X,Y) 用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值 left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom(transform-origin并不是transform中的属性值，他具有自己的语法)
transform语法：
transform: none|transform-functions;
例：
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ }
详细属性介绍：http://www.w3school.com.cn/cssref/pr_transform.asp
转换（transition）：css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
transition主要包含四个属性值：
执行变换的属性：transition-property,
变换延续的时间：transition-duration,
变换的速率变化transition-timing-function,
变换延迟时间transition-delay。
语法：
transition: property duration timing-function delay;
例：
div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }
.div1{
width: 100px;
-webkit-transition:-webkit-transform 1s 2s;
-ms-transition:-ms-transform 1s 2s;
-o-transition:-o-transform 1s 2s;
transition:transform 1m 2s;
-webkit-transform:translate(100px,0);
-ms-transform:translate(100px,0);
-o-transform:translate(100px,0);
transform:translate(100px,0);
}
详细属性介绍：http://www.w3school.com.cn/cssref/pr_transition.asp
动画（animation）：CSS3的Animation是由“keyframes”这个属性来实现效果的，"Keyframes",类似于“关键帧"，Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”。
keyframes 案例：
@keyframes myfirst { from {background: red;} to {background: yellow;} }
或
@keyframes myfirst
{
0% {background: red;}
50% {background: yellow;}
100% {background: green;}
}
创建好动画后使用时需要绑定到选择器上，这样才会有效果，那下面就用到了animation：
例：
div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }
animation主要包含以下几个属性：
用来定义一个动画的名称：animation-name，
指定元素播放动画所持续的时间长：animation-duration，
动画的播放方式：animation-timing-function，
播放方式有几下几种：
1、ease：（逐渐变慢）默认值
2、linear：（匀速）
3、ease-in：(加速)
4、ease-out：（减速）
5、ease-in-out：（加速然后减速）
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内， 否则无效。
指定元素动画开始时间：animation-delay，
指定元素播放动画的循环次数：animation-iteration-count，
指定元素动画播放的方向：animation-direction，
参数有以下几种：
1、normal： 默认值为normal，每次循环都是向前播放
2、alternate：动画播放在第偶数次向前播放，第奇数次向反方向播放
控制元素动画的播放状态：animation-play-state（注：这个属性目前很少内核支持）
参数有以下几种
1、running： 默认值 通过running将暂停的动画重新播放
2、paused：通过paused将正在播放的动画停下了
语法：
animation：name,duration,timing-function,delay,iteration-count,direction,play-state
详细属性介绍：http://www.w3school.com.cn/css3/css3_animation.asp
参考：http://www.cnblogs.com/2050/p/3409129.html
