過渡有transition-property、transition-duration、transition-timing-function、transition-delay四個屬性，當然過渡也提供了transition簡寫。
當觸發過渡事件結束後，各屬性通過相同的過渡回到預設屬性，延遲相同，但是transition-timing-function是相反的。
如果想為元素新增animation動畫，必須需要定義乙個關鍵幀。
@keyframes name
to...
to}// 當然，也可以使用百分比實現過程的精細化定義，
// 當沒有定義from或0%的時候，預設從元素計算後屬性開始
// 當沒有定義to或100%的時候，預設動畫結束時狀態為元素計算後屬性
// 當動畫結束後，元素狀態將會回到行間樣式，即計算後屬性，也就是元素渲染後的樣式
el.addeventlistener
('animationstart',(
)=>);
// 在動畫執行完成後觸發執行,若無限次執行且延遲大於零，此事件永遠不觸發。
el.addeventlistener
('animationend',(
)=>);
// 在動畫兩次迭代之間觸發執行
el.addeventlistener
('animationiteration',(
)=>);
animation還有特指度、!important、動畫順序、display:none對動畫影響、ui執行緒等，有機會再做乙個專題分享。
元素自從創立以來就是矩形的，且只能在橫軸和縱軸位置，而transform就是利用一些技巧將元素看起來 是傾斜的，但底層座標並沒有發生改變。
座標系常用的就是二維座標和三維座標，transform也就有2d和3d兩種版本。
// 移動類變換
transform:
translate
(x,y)
;//2d
transform:
translate3d
(x,y,z)
;// 3d
transform:
translatex()
translatey()
translatez()
;// 分方向移動
// 縮放類變換
transform:
scale
(x,y)
;// 2d
transform:
scale3d
(x,y,z)
;// 3d
transform:
scalex()
scaley()
scalez()
;// 分軸放縮
// 旋轉類變形
transform:
rotate
(deg)
;// 相當於rotatez()
transform:
rotate3d
(x,y,z, deg)
;// 不等價三個下邊的三個合在一起,x,y,z均可取0或1
transform:
rotatex()
rotatey()
rotatez()
;// 分軸旋轉
// 斜切類變形
transform:
skew
(x,y)
;// 與下邊兩個合起來不等價
transform:
skewx()
skewy()
;// 視域函式
transform:
persitive
(num)
;// 與後邊講的perspective屬性類似，不能是負值，否則會被忽略。
// 變形預設是按照元素的中心原點進行變換的，但可更改
tranform-origin:x y;
// 初始值為50% 50%。可以寫計算值，百分數或類似top的單詞
// 增強3d效果
transform-style:flat|perserve-
3d;// 預設flat，在元素進行3d變換時，是否保留子元素的3d變換。
// 景深
perspective:0;
// 預設值是none，
perspectiveorigin：x y ;
// 預設是50% 50%
// 處理背面
backface-visibility:hidden;
// 隱藏和父級角度相對的背面，預設visible
在定義變換的時候，也可以直接使用matrix函式，通過引數的變換實現平移、旋轉、斜切縮放等變換，下邊只介紹2d相關操作。
transform元素變化是將元素進行空間以及狀態進行變換，transition過渡和animation動畫是定義元素實現空間變換或狀態變換過程中的形式，其中transform可是過渡或狀態的乙個css屬性。
transition只能操作元素樣式變化的開始和結束時候的狀態，而無法完成在過程的精準變化。
js本身是無法單獨完成動畫的，而是通過借助類似間歇性定時器改變元素的樣式屬性值，進而實現元素的動態。人眼每秒能夠識別的24幀，也就是每秒渲染24次，超多24幀在人眼中就會形成連續的動畫效果。
注意盡量不要直接操作元素樣式值，而是通過transform完成操作，這樣效能和效率更高一些。
儘管使用間歇性定時器能夠實現動畫，但是有失幀的情況，所以實現的動畫效能和視覺都不是特別好。
timer=requestanimationfarme(function)，螢幕每秒60幀，當螢幕每次渲染的時候，便會執行一次動畫幀函式，但是如果需要持續動畫效果，需要使用遞迴。
cancelanimationframe(timer);
var timer =0;
run.
onclick
=function()
};
// t動畫已經執行了幾次，b動畫開始時值，c動畫初始值和目標值之間的差值，d動畫執行的次數
var val = tween[
'動畫方式'
](t,b,c,d)
;// 返回執行到第t次，動畫的屬性值
(
function()
}}; stop.
onclick
=function()
;})(
);
css函式主要用來配合設定動畫使用，兩個引數是獲取屬性值，三個引數是設定屬性值。
css(el,attr[,val]);
即使是非數值也能更改樣式，只是無法用來實現動畫效果。
由於transform變換無法直接獲取計算後的樣式，所以需要先設定css(el,『translatex』,0);,然後才能在使用mtween進行設定transform的變換樣式。
mtween(,
duration:
, fx:
'動畫執行的形式，類似勻速'
, cb:
function()
, moving:
function()
});mtween.
stop
(el)
;// 停止某個元素的動畫
// 如果需要動畫執行完畢後再執行一次，需要在cb函式中將呼叫框架執行在執行一次，也可封乙個函式
es6基礎、非同步處理、dom、bom、event事件。
css3動畫和js動畫
css3動畫 animation 是個簡寫屬性，用於設定六個動畫屬性。注意必須規定animation duration屬性，否則時長為0 animation timing function規定動畫速度曲線 alternate 動畫應該輪流反向 transtion 過度屬性 預設 all 0 ease...
簡單了解css3動畫與js動畫
相容性 css3 相容性不好，ie10才開始支援。js相容性好，甚至可以相容ie6。效能 css3 在效能上會稍微好一些，瀏覽器會對css3的動畫做一些優化 新建圖層來跑動畫 移動端的開發也有這種hack，開啟硬體加速，來解決可能的卡頓問題 css webkit transform translat...
CSS 動畫 3D翻頁動畫
doctype html html lang en head meta charset utf 8 meta name viewport content width device width,initial scale 1.0 title create effect of 3d title styl...