transition过渡
语法：transition: property duration timing-function delay;
transition-property
（all || [attr] || none）
属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。
transition-duration
规定完成过渡效果需要花费的时间（以秒或毫秒计）
注：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
transition-timing-function
属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。
—— ease：（逐渐变慢）默认值
—— linear：（匀速）
—— ease-in：(加速)
—— ease-out：（减速）
—— ease-in-out：（先加速后减速）
—— cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）transition-delay
规定过渡效果何时开始，值以秒或毫秒计。
过渡完成事件
Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){},false);
firefox: obj.addEventListener('transitionend',function(){},false);
2D变换
transform
rotate(<angle>) 旋转函数 取值度数(deg度数)
skew(<angle>[,<angle>]) 倾斜函数 取值度数
该函数包含两个参数，分别用来定义X轴Y轴的坐标倾斜角度。
—— skewX()
—— skewY()
scale(<number>[,<number>]) 缩放函数 取值 正数、负数和小数
该函数包含两个参数，分别用来定义宽和高的缩放比例，如果第二个参数省略则第二个参数等于第一个参数。
translate(<translation-value>[,<translation-value>]) 位移函数
该函数包含两个参数，分别用来定义X轴和Y轴的坐标。
—— translateX()
—— translateY()
Transform-origin 旋转的基点
初始值为”50% 50%”，接受两个参数，它们可以是百分比、em、px等具体值，也可以是left、center、right或者top、middle、bottom等描述性关键字
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
该属性必须与 transform 属性一同使用。
语法transform-origin: x-axis y-axis z-axis;
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)
matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现旋转
—— 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);
变换兼容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
3d变换
transform-style（preserve-3d） 建立3D空间
规定如何在 3D 空间中呈现被嵌套的元素,该属性必须与 transform 属性一同使用。
语法：transform-style: flat|preserve-3d;
Perspective 景深
目前浏览器都不支持 perspective 属性。Chrome 和 Safari 支持替代的
-webkit-perspective属性。
语法：perspective: number|none;
Perspective- origin 景深基点
目前浏览器都不支持
perspective-origin属性。Chrome 和 Safari 支持替代的-webkit-perspecitve-origin属性。
Transform 新增函数
—— rotateX()
—— rotateY()
—— rotateZ()
—— translateZ()
—— scaleZ()
animation
语法：animation: name duration timing-function delay iteration-count direction;
注：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
关键帧——keyFrames
类似于flash：只需指明两个状态，之间的过程由计算机自动计算
关键帧的时间单位
—— 数字：0%、25%、100%等
—— 字符：from(0%)、to(100%)
注：为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
格式(1)
@keyframes 动画名称
{
动画状态
}
栗子：
@-webkit-keyframes move
{
0%{
width:100px;
}
100%
{
width:500px;
}
}
调用：
animation:2s move;
格式(2)
@keyframes miaov_test
{
from { background:red; }
to { background:green; }
}
可以只有to
调用的标签(#div1、xxx:hover之类的)
必要属性
—— animation-name 动画名称（关键帧名称）
—— animation-duration 动画持续时间
例如：
-webkit-animation-name: ‘miaov';
-webkit-animation-duration: 4s;
animation-play-state 播放状态（ running 播放 和paused 暂停 ）
可选属性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%的状态开始执行
通过class
—— 在class里加入animation的各种属性
—— 直接给元素加-webkit-animation-xxx样式
animation的问题
—— 写起来麻烦
—— 没法动态改变目标点位置obj.addEventListener('webkitAnimationEnd', function (){}, false);