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 )
(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 動畫名稱
to (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為無限次
alternate 動畫直接從上一次停止的位置開始執行
normal 動畫第二次直接跳到0%的狀態開始執行
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...
css3新增動畫
1 transiition過渡 樣式改變就會執行transition 1 格式 transiition 1s width linear,2s 1s height 2 引數 ease 逐漸變慢 預設值 linear 勻速 ease in 加速 ease out 減速 ease in out 先加速後減...
css3新特性 過渡 動畫
目的是讓一些互動效果 主要是hover動畫 變得生動一些，不會顯得那麼生硬。css3 過渡是元素從一種樣式逐漸改變為另一種的效果，必須規定兩項內容 指定要新增效果的css屬性 持續時間。transition是以下四個屬性的簡寫 當需要同時給兩種css屬性新增過渡時，用逗號隔開 transition ...