css3动画基本

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{100px;height:100px;background:blue;transition:1s;} //参数一：过渡时间为1秒，鼠标划过一1秒内div原样式发生改变(过渡时间，可以是秒-s，或者是毫秒ms)

　　　　div{100px;height:100px;background:blue;transition:1s 2s;} //参数二：延迟2秒，执行过渡1秒的效果(延迟时间)

　　　　div{100px;height:100px;background:blue;transition:1s 2s width;} //参数三：只让width属性发生1秒过渡(要运动的样式) 注：运动样式，使用' , '隔开，可以一次写多个控制；如：1s width,2s height,3s background;

　　　　div{100px;height:100px;background:blue;transition:1s 2s width ease-out;} //参数四：width发生1秒过渡，以减速形式过渡 (运动形式)

　　　　div:hover{200px;height:200px;background:red;}

</style>

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{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{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>

2>Transform 执行顺序问题 — 后写先执行

3d变换

transform：

transform-style（preserve-3d）建立3D空间
Perspective 景深
Perspective- origin 景深基点
Transform 新增函数
rotateX()
rotateY()
rotateZ()
translateZ()
scaleZ()

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

animation：

关键帧——keyFrames
类似于flash
只需指明两个状态，之间的过程由计算机自动计算
关键帧的时间单位
数字：0%、25%、100%等
字符：from(0%)、to(100%)
格式
@keyframes 动画名称{
　　动画状态
}