CSS3動(dòng)畫的屬性主要分為三類：transform奈懒、transition以及animation卒茬。
Transform:(css3?2D 轉(zhuǎn)換)
注意：這些效果疊加時(shí)量没，中間用空格隔開
作用：能夠?qū)υ剡M(jìn)行移動(dòng)虐急、縮放婿屹、轉(zhuǎn)動(dòng)到踏、拉長碑韵、拉伸
轉(zhuǎn)換：使元素改變形狀叁怪、尺寸族展、位置的一種效果
Transform：2D的轉(zhuǎn)換方法：
rotate
設(shè)置元素順時(shí)針旋轉(zhuǎn)的角度森缠，用法是：transform: rotate(x);
參數(shù)x必須是以deg結(jié)尾的角度數(shù)或0，可為負(fù)數(shù)表示反向仪缸。
scale
設(shè)置元素放大或縮小的倍數(shù)贵涵，用法包括：
transform: scale(a); ? ? ? ? ? ? ? ? ?元素x和y方向均縮放a倍
transform: scale(a, b);????????????? 元素x方向縮放a倍，y方向縮放b倍
transform: scaleX(a);??????????????? 元素x方向縮放a倍恰画，y方向不變
transform: scaleY(b);??????????????? 元素y方向縮放b倍宾茂，x方向不變
Transform:2D詳細(xì)轉(zhuǎn)換方法：
translate()方法：
通過translate()方法，元素從其當(dāng)前位置移動(dòng)拴还，根據(jù)給定的left(x坐標(biāo))和top(y坐標(biāo))位置.(參數(shù)為負(fù)數(shù)時(shí)跨晴，反方向移動(dòng)物體，其基點(diǎn)默認(rèn)為元素中心點(diǎn)片林，也可以根據(jù)transform-origin進(jìn)行改變基點(diǎn))
translate 設(shè)置元素的位移端盆，用法為：
transform: translate(a, b);? ? ? ? ? ? ? ? 元素x方向位移a，y方向位移b
transform: translateX(a);? ? ? ? ? ? ? ? ? 元素x方向位移a费封，y方向不變
transform: translateY(b);? ? ? ? ? ? ? ? ? 元素y方向位移b焕妙，x方向不變
skew
設(shè)置元素傾斜的角度，用法包括：
transform: skew(a, b);????????????? 元素x方向逆時(shí)針傾斜角度a弓摘，y方向順時(shí)針傾斜角度b
transform: skewX(a);??????????????? 元素x方向逆時(shí)針傾斜角度a访敌，y方向不變
transform: skewY(b);??????????????? 元素y方向順時(shí)針傾斜角度b，想方向不變
以上的參數(shù)均必須是以deg結(jié)尾的角度數(shù)或0衣盾，可為負(fù)數(shù)表示反向寺旺。
matrix
設(shè)置元素的變形矩陣爷抓，因?yàn)榫仃囎冃芜^于復(fù)雜，暫略阻塑。
(1)translateX(n):transform:translateX(100px);
(2)translateY(n):transform:translateY(20px);
(3)translate(x,y):transform:translate(100px,20px);
注意：translate(100px);認(rèn)為和translateX(100px)等價(jià)蓝撇。
Rotate(angle)方法：
通過rotate(),元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值陈莽，元素將逆時(shí)針旋轉(zhuǎn)
Transform:rotate(30deg);
Transform:rotate(120deg);
Transform:rotate(-30deg);
Scale()方法：
通過scale()方法渤昌，元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度(X軸)和高度(Y軸)參數(shù)走搁。（中心點(diǎn)：元素的中心位置独柑，縮放基數(shù)為1，大于1就放大私植，小于1就縮屑烧ぁ）
（1）scaleX()方法：transform:scaleX(2);
值scaleX（2)把寬度轉(zhuǎn)換為原始尺寸的2倍
（2）scaleY()方法：transform:scaleY(2);
ScaleY(2)把高度度轉(zhuǎn)換為原始尺寸的2倍
（3）scale()方法：transform:scale(2,1.5);
值scale（2,2)把寬度轉(zhuǎn)換為原始尺寸的2倍，高度度轉(zhuǎn)換為原始尺寸的2倍
注意：scale（2）與scale(2,2)等價(jià)
Skew(angle)方法：
通過skew()方法曲稼，元素翻轉(zhuǎn)給定的角度索绪，根據(jù)給定的水平線（X軸）和垂直線(Y軸)參數(shù)（中心點(diǎn)：元素中心）
（1）skewX(angle):transform:skewX(30deg);
值skewX(30deg)圍繞X軸把元素翻轉(zhuǎn)30度。
（2）skewY(angle):transform:skewY（30deg）
值skewY(30deg)圍繞Y軸把元素翻轉(zhuǎn)30度贫悄。
(3)skew(x-angle,y-angle):transform:skew(30deg,10deg);
值skew(30deg,20deg)圍繞X軸把元素翻轉(zhuǎn)30度瑞驱，圍繞Y軸翻轉(zhuǎn)20度。
注意：skew(30deg)等價(jià)于skewX(30deg）
Matrix()方法:
Matrix()方法把所有2D轉(zhuǎn)換方法組合在一起窄坦。
Matrix()方法需要六個(gè)參數(shù)唤反，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)鸭津，縮放拴袭，移動(dòng)，傾斜元素曙博。
Transform-origin(x,y)方法：
改變?cè)氐幕c(diǎn)位置拥刻。
X和y的值：百分值，em父泳，px般哼，關(guān)鍵字。
Left,center,right是水平方向取值：
Left=0%;center=50%;right:100%;
Top,center,bottom是垂直方向的取值：
Top=0%;center=50%;bottom=100%;
如果只取一個(gè)值惠窄，表示垂直方向值不變（center）
1蒸眠、top left | left top等價(jià)于0 0 | 0% 0%
2、top | top center | center top等價(jià)于50% 0
3杆融、right top | top right等價(jià)于100% 0
4楞卡、left | left center | center left等價(jià)于0 50% | 0% 50%
5、center | center center等價(jià)于50% 50%（默認(rèn)值）
6、right | right center | center right等價(jià)于100% 50%
7蒋腮、bottom left | left bottom等價(jià)于0 100% | 0% 100%
8淘捡、bottom | bottom center | center bottom等價(jià)于50% 100%
9、bottom right | right bottom等價(jià)于100% 100%
Css3 3D轉(zhuǎn)換
Css3 transform方法：
Transform-style:
規(guī)定如何在3D空間中呈現(xiàn)被嵌套的元素池摧，該屬性必須與transform屬性一同使用焦除。該屬性設(shè)置在父元素中
Transform-style:flat|preserve-3d
Perspective:
Perspective:number|none;
perspective屬性定義3D元素距視圖的距離，以像素計(jì)作彤。該屬性允許您改變3D元素,查看3D元素的視圖膘魄。
注意：
（1）當(dāng)為元素定義perspective屬性時(shí)，其子元素會(huì)獲得透視效果竭讳，而不是元素本身创葡。（2）與perspective-origin屬性一同使用該屬性，這樣就能改變3D元素的底部位置
（3）我們可以簡單的理解為視距绢慢，用來設(shè)置用戶和元素3D空間Z平面之間的距離灿渴。而其效應(yīng)由他的值來決定，值越小呐芥，用戶與3D空間Z平面距離越近，視覺效果更令人印象深刻奋岁；反之思瘟，值越大，用戶與3D空間Z平面距離越遠(yuǎn)闻伶，視覺效果就很小滨攻。（perspective取值越小，3D效果就越明顯蓝翰，也就是你的眼睛越靠近真3D光绕。）
Perspective-origin:
Perspective-origin:x-axisy-axis;
定義3D元素所基于的X軸和Y軸。該屬性允許您改變3D元素的底部位置畜份。當(dāng)為元素定義perspective-origin屬性時(shí)诞帐，其子元素會(huì)獲得透視效果，而不是元素本身爆雹。(該屬性必須與perspective屬性一同使用停蕉，而且只影響3D轉(zhuǎn)換元素)
注意：為了指轉(zhuǎn)換子元素變形的深度，perspective-origin屬性必須定義父元素上钙态。通常perspective-origin屬性本身不做任何事情慧起，它必須被定義在設(shè)置了perspective屬性的元素上。換句話說册倒，perspective-origin屬性需要與perspective-origin屬性結(jié)合起來使用蚓挤，以便將視點(diǎn)移至元素的中心以外位置
Backface-visibility:隱藏被旋轉(zhuǎn)元素的背面
Backgace-visibility:visible|hidden;
Translate3d()
transform:translate(30px,30px,200px);
Transform:translate3d(30px,30px,-200px);
當(dāng)z軸值越大時(shí)，元素也離觀看者更近，從視覺上元素就變得更大灿意；反之其值越小時(shí)估灿，元素也離觀看者更遠(yuǎn)，從視覺上元素就變得更小脾歧。
TranslateZ():
Transform:translateZ(200px);
Transform:translateZ(-200px);
使用translateZ()函數(shù)可以讓元素在Z軸進(jìn)行位移甲捏，當(dāng)其值為負(fù)值時(shí)，元素在Z軸越移越遠(yuǎn)鞭执，導(dǎo)致元素變得較小司顿。反之，當(dāng)其值為正值時(shí)兄纺，元素在Z軸越移越近大溜，導(dǎo)致元素變得較大。
ScaleZ():
默認(rèn)值為1估脆，當(dāng)值大于1時(shí)钦奋，元素放大，反之小于1大于0.01時(shí)疙赠，元素縮小付材。
ScaleZ(-1)定義了一個(gè)原點(diǎn)在z軸的對(duì)稱點(diǎn)
單獨(dú)使用沒有效果，需配合其他變形函數(shù)一起使用才會(huì)有效果
Transform:scale(5) rotateX(45deg);
Transform:scale(.25) rotateX(45deg);
RotateX(angle),rotateY(angle),rotateZ(angle):
圍繞X/Y/Z軸旋轉(zhuǎn)圃阳，angle為旋轉(zhuǎn)的角度厌衔，可以是正值，順時(shí)針旋轉(zhuǎn)捍岳，可以是負(fù)值富寿，逆時(shí)針旋轉(zhuǎn)
Rotate3d(x,y,z,angle):
·x：是一個(gè)0到１之間的數(shù)值，主要用來描述元素圍繞X軸旋轉(zhuǎn)的矢量值锣夹；
·y：是一個(gè)０到１之間的數(shù)值页徐，主要用來描述元素圍繞Y軸旋轉(zhuǎn)的矢量值；
·z：是一個(gè)０到１之間的數(shù)值银萍，主要用來描述元素圍繞Z軸旋轉(zhuǎn)的矢量值变勇；
·a：是一個(gè)角度值，主要用來指定元素在3D空間旋轉(zhuǎn)的角度贴唇，如果其值為正值贰锁，元素順時(shí)針旋轉(zhuǎn)，反之元素逆時(shí)針旋轉(zhuǎn)滤蝠。
Transform:rotateX(45deg);
Transform:rotateY(45deg);
Transform:rotateZ(45deg);
Transform:rotate3d(.6,1,.6,45deg);
origin
設(shè)置元素的懸掛點(diǎn)豌熄，用法包括：transform-origin: a b;??????????????? 元素的懸掛點(diǎn)為(a, b)
元素的懸掛點(diǎn)即為它旋轉(zhuǎn)和傾斜時(shí)的中心點(diǎn)。取值中的a物咳、b可以是長度值锣险、以%結(jié)尾的百分比或者left蹄皱、top、right芯肤、bottom四個(gè)值巷折。
transition-property
指定transition效果作用的CSS屬性，其值是CSS屬性名崖咨。
transition-duration
動(dòng)畫效果持續(xù)的時(shí)間锻拘，其值為以s結(jié)尾的秒數(shù)。
transition-timing-function
transition-delay
動(dòng)畫效果推遲開始執(zhí)行的時(shí)間击蹲，其值為以s結(jié)尾的秒數(shù)署拟。
CSS3動(dòng)畫的生命周期如下圖所示，從中可以清楚的看出duration和delay之間的關(guān)系：
CSS3中真正的動(dòng)畫屬性是animation歌豺，而前面的transform和transition都只是對(duì)DOM元素的變形或者是狀態(tài)的過渡推穷。實(shí)際上，CSS3所支持的動(dòng)畫效果只是填充動(dòng)畫类咧，也就是說先設(shè)定整個(gè)動(dòng)畫生命周期中的幾個(gè)關(guān)鍵狀態(tài)（key ?frame馒铃，關(guān)鍵幀），然后動(dòng)畫將自行計(jì)算并模擬關(guān)鍵幀之間的過渡痕惋。那么在設(shè)置animation的屬性之前就必須先設(shè)定好關(guān)鍵幀了区宇。
關(guān)鍵幀@keyframes的語法結(jié)構(gòu)如下：
@keyframesNAME {
a% {
/*CSS屬性*/
}
b% {
/*CSS屬性*/
}
...
}
NAME表示動(dòng)畫的名字；a%值戳、b%表示以百分號(hào)結(jié)尾的百分?jǐn)?shù)议谷，用于設(shè)定該關(guān)鍵幀在動(dòng)畫生命周期中的位置；百分?jǐn)?shù)后面的{ } 中則需要寫成該關(guān)鍵幀狀態(tài)下CSS屬性的值述寡。另外柿隙，如果同一個(gè)百分?jǐn)?shù)值在@keyframes中出現(xiàn)多次叶洞，那么后出現(xiàn)的將覆蓋先出現(xiàn)的鲫凶；并且關(guān)鍵幀在@keyframes中時(shí)無序的。
設(shè)置完關(guān)鍵幀后就可以繼續(xù)設(shè)定animation了衩辟。
animation-name
指定選用的動(dòng)畫的名字螟炫，即keyframes中的NAME。
animation-duration
同transition-duration艺晴。
animation-timing-function
同transition-timing-function昼钻。
animation-delay
同transition-delay。
animation-iteration-count
設(shè)定動(dòng)畫執(zhí)行的次數(shù)封寞，其值可以是數(shù)字也可以是infinite（循環(huán)執(zhí)行）然评。
animation-direction
設(shè)定動(dòng)畫執(zhí)行的方向，其值可以是normal（正常順序播放）或alternate（反向播放）狈究。
因?yàn)镃SS3還沒有正式發(fā)布碗淌，所以各種瀏覽器對(duì)它的支持也不盡相同。所以在設(shè)置CSS3屬性（包括@開頭的新屬性）的時(shí)候通常需要對(duì)其添加瀏覽器標(biāo)識(shí)的前綴，如-webkit- 表示W(wǎng)ebkit內(nèi)核的瀏覽器Chrome和Safari亿眠，-moz- 表示Fire Fox碎罚，-o- 表示Opera。無視IE吧纳像，在IE上的實(shí)現(xiàn)通常還是要用到濾鏡荆烈，而不是CSS3。
下面的代碼模擬了上述大部分的CSS3動(dòng)畫屬性竟趾，由于只使用了–webkit- 前綴憔购，所以只能在Chrome或Safari下正常運(yùn)行。
HTML代碼：
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>CSS3動(dòng)畫</title>
<link type="text/css"rel="stylesheet"href="animation.css"/>
</head>
<body>
<div class="rotate">rotate</div>
<div class="scale">scale</div>
<div class="translate">translate</div>
<div class="skew">skew</div>
<div class="origin">origin</div>
<div class="single">single property</div>
<div class="whole">whole property</div>
<div class="resume">change & resume</div>
<div class="animation">animation</div>
</body>
</html>CSS3動(dòng)畫
CSS代碼：
animation.css
div {width:80px;height:30px;line-height:30px;text-align:center;background:#06f;color:#fff;font-family:Arial,Helvetica,sans-serif;-webkit-border-radius:10px;margin:5px;}
.rotate?{-webkit-transform:?rotate(0deg);}
.rotate:hover?{-webkit-transform:?rotate(90deg);}
.scale?{-webkit-transform:?scale(1);}
.scale:hover?{-webkit-transform:?scale(1.5);}
.translate?{-webkit-transform:?translate(0px,0px);}
.translate:hover?{-webkit-transform:?translate(50px,50px);}
.skew?{-webkit-transform:?skew(0);}
.skew:hover?{-webkit-transform:?skewY(20deg);}
.origin?{-webkit-transform-origin:topleft;-webkit-transform:?rotate(0);}
.origin:hover?{-webkit-transform:?rotate(45deg);}
.single?{width:150px;}
.single:hover?{background:#f00;width:200px;height:100px;line-height:100px;-webkit-transition-property:?background;-webkit-transition-duration:2s;}
.whole?{width:150px;}
.whole:hover?{width:200px;height:100px;line-height:100px;background:#f00;-webkit-transition-duration:2s;}
.resume?{width:150px;-webkit-transition-duration:2s;}
.resume:hover?{width:200px;height:100px;line-height:100px;background:#f00;-webkit-transition-duration:2s;}
.animation:hover?{-webkit-animation-name:?anim;-webkit-animation-duration:2s;-webkit-animation-timing-function:?linear;-webkit-animation-direction:?alternate;-webkit-animation-iteration-count:?infinite;}
@-webkit-keyframes?anim?{
0%{width:80px;height:30px;line-height:30px;background:#06F;}
50%{width:140px;height:65px;line-height:65px;background:#360;}
100%{width:200px;height:100px;line-height:100px;background:#f00;}
}