通過 css3，我們能夠建立動畫，這可以在許多網頁中取代動畫圖檔、flash 動畫以及 javascript。
css3帶來了圓角，半透明，陰影，漸變，多背景圖等新的特征，輕松實作了設計稿中常見的圖層樣式，用簡潔的代碼替代圖檔，代替了多餘的空标簽。
<a target="_blank">1</a>
background-position 屬性設定背景圖像的起始位置，預設值：0% 0%，效果等同于left top
background-size 屬性規定背景圖檔的尺寸。在 css3 之前，背景圖檔的尺寸是由圖檔的實際尺寸決定的。在css3中，可以規定背景圖檔的尺寸，這就允許我們在不同的環境中重複使用背景圖檔。
border-radius 屬性是一個簡寫屬性，用于設定四個 border-*-radius 屬性。
box-shadow 屬性向框添加一個或多個陰影
css3 color屬性在傳統的hex和rgb值中增加了hsl特性，也就是增加了opacity（透明度）和alpha channels
<dl></dl>
<dt></dt>
2d變形&過渡
<dd></dd>
旋轉：設定旋轉角度，對應css：transform:rotate(ndeg) (工具裡n為-360 – 360間的任意數值)
x軸縮放：設定x軸方向縮放，對應css: transform:scalex(n)(工具裡n為-5 – 5間的任意數值)
y軸縮放：設定y軸方向縮放，對應css: transform:scaley(n)(工具裡n為-5 – 5間的任意數值)
x軸位移：設定x軸位移，對應css：transform:translatex(npx)
y軸位移：設定y軸位移，對應css：transform:translatey(npx)
x軸傾斜：設定x軸傾斜，對應css：transform:skewx(ndeg)
y軸傾斜：設定y軸傾斜，對應css：transform:skewy(ndeg)
矩陣變形：設定矩陣變形，對應css：transform:matrix(a,c,e,b,d,f) c,e值用正弦或餘弦值表示,ab為縮放值，df為位移值
變形原點 ：設定變形原點，對應css：transform-origin:x y；transform-origin(x,y):用來設定元素的運動的基點（參照點）。預設點是元素的中心點。其中x和y的值可以是百分 值,em,px，其中x也可以是字元參數值left,center,right；y和x一樣除了百分值外還可以設定字元值 top,center,bottom，這個看上去有點像我們background-position設定一樣；下面我列出他們相對應的寫法：
top left | left top 等價于 0 0 | 0% 0%
top | top center | center top 等價于 50% 0
right top | top right 等價于 100% 0
left | left center | center left 等價于 0 50% | 0% 50%
center | center center 等價于 50% 50%（預設值）
right | right center | center right 等價于 100% 50%
bottom left | left bottom 等價于 0 100% | 0% 100%
bottom | bottom center | center bottom 等價于 50% 100%
bottom right | right bottom 等價于 100% 100%
其中 left,center right是水準方向取值，對應的百分值為left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果隻取一個值，表示垂直方向值不變
過渡屬性：執行變換的css屬性，文法：transition-property
延遲時間：指定元素 轉換過程的持續時間，文法：transition-duration
過渡效果：允許你根據時間的推進去改變屬性值的變換速率，文法：transition-timing-function。點選對應按鈕添加過渡效果，點選cubic-bezier()自定義立方貝塞爾曲線效果。
3d變形&過渡
透視：perspective有兩種寫法，一種是設定所有的子元素有一個共同的透視值，perspective作為一個屬性值來寫；一種是直接作用于元素本身，perspective作為transform的一個函數來寫如：
.wrap{-webkit-perspective:1000px;}
.wrap .child{-webkit-transform:perspective(1000px);}
x軸旋轉: rotatex(angele),相當于rotate3d(1,0,0,angle)指定在3維空間内的x軸旋轉，文法：transform:perspective(length) rotatex(angele);
y軸旋轉: rotatey(angele),相當于rotate3d(0,1,0,angle)指定在3維空間内的y軸旋轉，文法：transform:perspective(length) rotatey(angele);
z軸旋轉: rotatez(angele),相當于rotate3d(0,0,1,angle)指定在3維空間内的z軸旋轉，文法：transform:perspective(length) rotatez(angele);
x軸縮放：scalex():表示隻在x軸(水準方向)縮放元素。
y軸縮放：scaley():表示隻在y軸(垂直方向)縮放元素。
z軸縮放：scalez():表示隻在z軸縮放元素。前提是元素本身或者元素的父元素設定了透視值
x軸位移: : 表示隻在x軸(水準方向)移動元素。文法：translatex();
y軸位移: 表示隻在y軸(水準方向)移動元素。文法：translatey();
z軸位移: 表示隻在z軸(水準方向)移動元素。文法：translatez();
y軸傾斜: ：設定y軸傾斜，對應css：transform:skewy(ndeg)
變形原點: 同2d
過渡屬性: 同2d
過渡時間: 同2d
延遲時間: 同2d
過渡效果: 同2d
動畫名稱：自定義動畫的名稱, 對應css：animation-name:
執行時間：指定對象動畫的持續時間，對應css: animation-duration:
延遲執行設定動畫延遲執行的時間，對應css: animation-delay:
執行次數：設定對象動畫的循環次數，對應css: animation-iteration-count:或infinite（無限循環）
變形原點：同變形&過渡
過渡效果：允許你根據時間的推進去改變屬性值的變換速率，文法：animation-timing-function。點選對應按鈕添加過渡效果，點選cubic-bezier()自定義立方貝塞爾曲線效果。
播放方向：：設定對象動畫循環播放次數大于1次時，動畫是否反向運動。文法：animation-direction:，normal：正常方向，reverse：動畫反向運作（ff14.0.1以下不支援），alternate：動畫會循環正反方向交替運動，alternate-reverse：動畫從反向開始，再正反方向交替運動，運動方向始終與alternate定義的相反。（ff14.0.1以下不支援）
隐藏背景：設定對象動畫時間之外的狀态。文法：animation-fill-mode:, none：預設值。不設定對象動畫之外的狀态；forwards：結束後保持動畫結束時的狀态，但當animation-direction為0，則動畫不執行，持續保持動畫開始時的狀态；backwards：結束後傳回動畫開始時的狀态；both：結束後可遵循forwards和backwards兩個規則。
動畫狀态設定對象動畫的狀态，文法：animation-play-state:, running：預設值。運動；paused：暫停。
執行動畫的屬性: 設定動畫過程中對象屬性
點選對應效果右側檢視執行個體，點選檢視代碼可直接檢視對應效果的源碼。
1、純css3實作質感發光動畫按鈕
2、10大經典css3菜單應用欣賞
3、9種css3炫酷圖檔預覽展示動畫特效