CSS3動(dòng)畫的屬性主要分為三類：transform、transition以及animation。
Transform:(css3?2D 轉(zhuǎn)換)
注意：這些效果疊加時(shí)，中間用空格隔開(kāi)
作用：能夠?qū)υ剡M(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎ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()方法：
通過(guò)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)榫仃囎冃芜^(guò)于復(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)方法：
通過(guò)rotate(),元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)
Transform:rotate(30deg);
Transform:rotate(120deg);
Transform:rotate(-30deg);
Scale()方法：
通過(guò)scale()方法，元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度(X軸)和高度(Y軸)參數(shù)。（中心點(diǎn)：元素的中心位置，縮放基數(shù)為1，大于1就放大，小于1就縮?。?/p>
（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)方法：
通過(guò)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）我們可以簡(jiǎn)單的理解為視距，用來(lái)設(shè)置用戶和元素3D空間Z平面之間的距離。而其效應(yīng)由他的值來(lái)決定，值越小，用戶與3D空間Z平面距離越近，視覺(jué)效果更令人印象深刻；反之，值越大，用戶與3D空間Z平面距離越遠(yuǎn)，視覺(jué)效果就很小。（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屬性的元素上。換句話說(shuō)，perspective-origin屬性需要與perspective-origin屬性結(jié)合起來(lái)使用，以便將視點(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í)，元素也離觀看者更近，從視覺(jué)上元素就變得更大；反之其值越小時(shí)，元素也離觀看者更遠(yuǎn)，從視覺(jué)上元素就變得更小。
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ú)使用沒(méi)有效果，需配合其他變形函數(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ù)值，主要用來(lái)描述元素圍繞X軸旋轉(zhuǎn)的矢量值；
·y：是一個(gè)０到１之間的數(shù)值，主要用來(lái)描述元素圍繞Y軸旋轉(zhuǎn)的矢量值；
·z：是一個(gè)０到１之間的數(shù)值，主要用來(lái)描述元素圍繞Z軸旋轉(zhuǎn)的矢量值；
·a：是一個(gè)角度值，主要用來(lái)指定元素在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可以是長(zhǎng)度值、以%結(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)畫效果推遲開(kāi)始執(zhí)行的時(shí)間，其值為以s結(jié)尾的秒數(shù)。
CSS3動(dòng)畫的生命周期如下圖所示，從中可以清楚的看出duration和delay之間的關(guān)系：
CSS3中真正的動(dòng)畫屬性是animation，而前面的transform和transition都只是對(duì)DOM元素的變形或者是狀態(tài)的過(guò)渡。實(shí)際上，CSS3所支持的動(dòng)畫效果只是填充動(dòng)畫，也就是說(shuō)先設(shè)定整個(gè)動(dòng)畫生命周期中的幾個(gè)關(guān)鍵狀態(tài)（key ?frame，關(guān)鍵幀），然后動(dòng)畫將自行計(jì)算并模擬關(guān)鍵幀之間的過(guò)渡。那么在設(shè)置animation的屬性之前就必須先設(shè)定好關(guān)鍵幀了。
關(guān)鍵幀@keyframes的語(yǔ)法結(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í)無(wú)序的。
設(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還沒(méi)有正式發(fā)布，所以各種瀏覽器對(duì)它的支持也不盡相同。所以在設(shè)置CSS3屬性（包括@開(kāi)頭的新屬性）的時(shí)候通常需要對(duì)其添加瀏覽器標(biāo)識(shí)的前綴，如-webkit- 表示W(wǎng)ebkit內(nèi)核的瀏覽器Chrome和Safari，-moz- 表示Fire Fox，-o- 表示Opera。無(wú)視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;}
}