Transition:过渡
1>过渡属性：
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/
过渡属性应用实例：
<style>
div{width:100px;height:100px;background:blue;transition:1s;} //参数一：过渡时间为1秒，鼠标划过一1秒内div原样式发生改变(过渡时间，可以是秒-s，或者是毫秒ms)
div{width:100px;height:100px;background:blue;transition:1s 2s;} //参数二：延迟2秒，执行过渡1秒的效果(延迟时间)
div{width:100px;height:100px;background:blue;transition:1s 2s width;} //参数三：只让width属性发生1秒过渡(要运动的样式) 注：运动样式，使用‘ , ‘隔开，可以一次写多个控制；如：1s width,2s height,3s background;
div{width:100px;height:100px;background:blue;transition:1s 2s width ease-out;} //参数四：width发生1秒过渡，以减速形式过渡 (运动形式)
div:hover{width:200px;height:200px;background:red;}
</style>
<div></div>
2>过渡完成事件：
(a).监听事件：
Webkit内核： obj.addEventListener(‘webkitTransitionEnd‘,function(){},false);
firefox: obj.addEventListener(‘transitionend‘,function(){},false);
(b).删除监听事件：
Webkit内核： obj.removeEventListener(‘webkitTransitionEnd‘,function(){},false);
firefox: obj.removeEventListener(‘transitionend‘,function(){},false);
完成事件应用示例：
<style>.box{width:100px;height:100px;background:red; transition:1s width;}</style>
<divclass="box" id="box"></div>
<script>
var oBox=document.getElementById("box");
oBox.onclick=function(){
this.style.width=this.offsetWidth+100+"px";
};
addEnd(oBox,function(){ //当过渡完成后，触发addEnd事件
alert("end");
});
function addEnd(obj,fn) {
obj.addEventListener(‘WebkitTransitionEnd‘,fn,false); //监听过渡后的事件
obj.addEventListener(‘transitionend‘,fn,false);
}
function removeEnd(obj,fn) {
obj.removeEventListener(‘WebkitTransitionEnd‘,fn,false); //删除监听过渡后的事件
obj.removeEventListener(‘transitionend‘,fn,false);
}
</script>
2D变换
transform：
1>transform属性：
rotate() 旋转函数 取值度数 deg 度数
Transform-origin 旋转的基点
skew() 倾斜函数 取值度数
skewX() skewY()
scale() 缩放函数 取值 正数、负数和小数
scaleX() scaleY()
translate() 位移函数
translateX() translateY()
属性应用实例：
<style>
div{width:100px;height:100px;background:red;transition:2s;} //注意：transform必须要配合transition使用，否则看不到效果
div:hover{-webkit-transform:roate(360deg);} //旋转360度
div:hover{-webkit-transform:skewX(45deg);} //横向倾斜45度 skewY：为纵向倾斜;
div:hover{-webkit-transform:scale(1.1);} //放大1.1倍 scale:横向和纵向同时放大；scaleX:只横向放大; scaleY:只纵向放大
div:hover{-webkit-transform:translate(200px);} //横向位移200px 接收两个参数，第一个是横向，第二个是纵向
</style>
<div></div>
2>Transform 执行顺序问题 — 后写先执行
3>matrix(a,b,c,d,e,f) 矩阵函数
a.通过矩阵实现缩放
x轴缩放 a=x*a c=x*c e=x*e;
y轴缩放 b=y*b d=y*d f=y*f;
b.通过矩阵实现位移
x轴位移: e=e+x
y轴位移: f=f+y
c.通过矩阵实现倾斜
x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
d.通过矩阵实现旋转
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);
4>变换兼容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