css3新增動畫

1、transiition過渡:樣式改變就會執行transition

（1）格式：transiition：1s width linear,2s 1s height;

（2）引數：

ease：（逐漸變慢）預設值

linear：（勻速）

ease-in：(加速)

ease-out：（減速）

ease-in-out：（先加速後減速）

cubic-bezier 貝塞爾曲線（ x1, y1, x2, y2 ）

(3)過渡完成事件

2、transform2d

（1）格式：transiition：1s width linear,2s 1s height;

（2）引數：

deg 度數

skewx()

skewy()

scalex()

scaley()

translatex()

translatey()

（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;

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版本只能通過矩陣來實現

（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）引數

rotatex()：水平

rotatey()：豎直

rotatez()：垂直於螢幕

translatez()：正值放大，負值縮小

scalez()

4、animation

（1）關鍵幀的時間單位

（2）格式

動畫狀態

from

to（3）引數

animation-name 動畫名稱（關鍵幀名稱）

animation-duration 動畫持續時間

例如： -webkit-animation-name: 『m'; -webkit-animation-duration: 4s;

linear 勻速。

ease 緩衝。

ease-in 由慢到快。

ease-out 由快到慢。

ease-in-out 由慢到快再到慢。

cubic-bezier(number, number, number, number)： 特定的貝塞爾曲線型別，4個數值需在[0, 1]區間內

alternate 動畫直接從上一次停止的位置開始執行

normal 動畫第二次直接跳到0%的狀態開始執行

css3新動 css3新增動畫

1 transiition過渡 樣式改變就會執行transition 1 格式 transiition 1s width linear,2s 1s height 2 引數 transition property 要運動的樣式 all attr none transition duration 運動時...

css3新動 CSS3 動畫

注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...

CSS基礎 CSS3動畫

通過css3動畫屬性，我們可以建立動畫，實現簡單的動畫效果。css3動畫的實現需要用到animation屬性並配合關鍵幀 keyframes 使用。1.對需要設定動畫的元素新增animation屬性。2.設定關鍵幀 keyframes animation是所有動畫屬性的簡寫屬性，除了 animati...