css3新增動畫，css3新增

css3新增動畫，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 暫停 ）