CSS3新增动画效果
1、transiition过渡:样式改变就会执行transition
（1）格式：transiition：1s width linear,2s 1s height;
（2）参数：
- transition-property 要运动的样式 （all || [attr] || none）
-
transition-duration 运动时间
-
transition-delay 延迟时间
-
transition-timing-function 运动形式
ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）http://matthewlein.com/ceaser/
(3)过渡完成事件
- Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){
- },false);
- firefox: obj.addEventListener('transitionend',function(){
- },false);
2、transform2D
（1）格式：transiition：1s width linear,2s 1s height;
（2）参数：
- rotate() 旋转函数 取值度数
deg 度数
- skew() 倾斜函数 取值度数
skewX()
skewY()
- scale() 缩放函数 取值 正数、负数和小数
scaleX()
scaleY()
- translate() 位移函数
translateX()
translateY()
- transform-origin 旋转的基点（left top左上角）
（3）注意：Transform 执行顺序问题 — 后写先执行
（4）matrix(a,b,c,d,e,f) 矩阵函数
默认：matrix（1,0,0,1,0,0）
- 通过矩阵实现缩放
x轴缩放 a=x*a c=x*c e=x*e;
y轴缩放 b=y*b d=y*d f=y*f;
- 通过矩阵实现位移(ie下没有)
x轴位移: e=e+x
y轴位移: f=f+y
- 通过矩阵实现倾斜
x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
- 通过矩阵实现旋转
a=Math.cos(deg/180*Math.PI);
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
（5）变换兼容IE9以下IE版本只能通过矩阵来实现
- filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
- IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d
（6）IE下基点修正
obj.style.left=(obj.parentNode.offsetWidth-obj.offsetWidth)/2+"px";
obj.style.top=(obj.parentNode.offsetHeight-obj.offsetHeight)/2+"px";
3、transform3D
（1）参数
- transform-style（preserve-3d） 建立3D空间
- Perspective 景深
- Perspective- origin 景深基点
- Transform 新增函数
rotateX()：水平
rotateY()：竖直
rotateZ()：垂直于屏幕
translateZ()：正值放大，负值缩小
scaleZ()
4、animation
（1）关键帧的时间单位
- 数字：0%、25%、100%等
- 字符：from(0%)、to(100%)
（2）格式
- @keyframes 动画名称 {
动画状态
}
-
@keyframes miaov_test {
from { background:red; }
to { background:green; }
}
（3）参数
- 必要属性
animation-name 动画名称（关键帧名称）
animation-duration 动画持续时间
例如： -webkit-animation-name: ‘m'; -webkit-animation-duration: 4s;
-
可选属性
-
animation-timing-function 动画运动形式
linear 匀速。
ease 缓冲。
ease-in 由慢到快。
ease-out 由快到慢。
ease-in-out 由慢到快再到慢。
cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
-
animation-delay 动画延迟 只是第一次
-
animation-iteration-count 重复次数——infinite为无限次
-
animation-direction 播放前重置
动画是否重置后再开始播放
alternate 动画直接从上一次停止的位置开始执行
normal 动画第二次直接跳到0%的状态开始执行
- animation-play-state 播放状态（ running 播放 和paused 暂停 ）
