第一课 transition 过渡
1. transition - property 要运动的样式
transition - property ：attr 具体属性过渡
例如 ： transition ：500ms width； 500毫秒只有宽度变化
transition - property ：all 所有参数过渡
transition - property ：none
2. transition - duration 运动时间
3. transition - delay 延迟时间
4.transition - timing - function 运动形式
属性 ： linear 匀速
ease 逐渐变慢
ease-in 加速
ease-out 减速
ease - in - out 先加速在减速
cubic-bezier 贝塞尔曲线 （x1 , y1 , x2 , y2） http//www.matthelein.com/ceaser
5.transition : 2s width,3s 2s height, 5s 1s background ；
2秒宽度变化完成，延迟2秒后，3秒完成高度变化，延迟1秒后，5秒完成背景变化
第二课 样式每改变一次，就会调用一次transition
transition 过渡完成事件 意思就是 事件发生在过渡完成之后
1. webkit 内核 ： obj.addEventListener ( "WebkitTransitionEnd",function(){},false )
2.firfox 内核 ： obj.addEventListener( "Transitionend",function(){},false )
第三课 2d变化
1. transform 变化
-webkit-transform：rotate（30deg） 旋转函数 取值度数 1.rotateX（） 2.rotateY（） 3.rotateZ（）
-webkit-transform-origin 旋转的基点
-webkit-transform：skew（30deg） 斜切；倾斜 1.skewX（） 2.skewY（） 4.skewZ（）
-webkit-transform: scale(2); 缩放 1.scale（） 2.scaleX（） 3.scaleY（）
-webkit-transform-translate（100px） 位移 -webkit-transform-translateX（100px） 左→右
-webkit-transform-translateY（100px）上→下
-webkit-transform-translate（-100px，200px）
-webkit-transform: rotate(720deg) skew(30deg) scale(2) translate(500px);
第四课 matrix 矩阵
1.-webkit-transform：matrix（1，0，0，1，0，0）
2.-webkit-transform：matrix（a，b，c，d，e，f） 矩阵函数
通过矩阵函数实现缩放
x 轴缩放 ： a=x*a c=x*c e=x*e
y轴缩放 ：b=y*b d=y*d f=y*f
通过矩阵函数实现位移
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)
d=Math.cos(deg/180*Math.PI)
c=-Math.sin(deg/180*Math.PI)
兼容IE9以下版本只能通过矩阵来实现
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
第五课 3d变化
1.创建3d ： -webkit-transform-style : preserve-3d
2.景深 ： -webkit-perspective:100px; 由远到近的效果
3.景深基点 ： perspective-origin
4.隐藏背面 ： backface-visibility
5.transform新增的属性 ：
rotateX
rotateX
rotateX
translateZ
scaleZ
动画
格式1：@keyframes 动画名称
{
动画状态
}
调用webkit-animation：2s move（只是一个名字而已）
例如：@-webkit-keyframes move（只是一个名字而已）
{
0%{width：100px} 关键帧
100%{width：500px}
}
webkit-animation：2s move（只是一个名字而已）
animation属性：animation-delay 动画延迟
animation-iteration-count infinite（无线重复次数） 重复次数
animation-direction 播放重置
（alternate：动画直接从上一次停止的位置开始执行）
（normal：动画从第二次直接跳到0%的状态开始实行）
格式2：
