在這html5遍天下的年代，越來越多的網(wǎng)頁也用到了css3的動(dòng)畫效果，這讓原本我們靜態(tài)的頁面有了更多的活力。最近也一直在做這方面的頁面，有些小小的心得，和諸位分享下。
CSS3的動(dòng)畫絕對(duì)是很贊的，不僅支持PC還支持移動(dòng)端，但也有限制，比如說瀏覽器的限制，雖然有這方面的限制，用它的人還是很多的。

CSS3 過渡（transform）

通過 CSS3，我們可以在不使用 Flash 動(dòng)畫或 Javas cript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。
transform屬性能對(duì)元素對(duì)象進(jìn)行變形操作，主要包括以下幾種：旋轉(zhuǎn)rotate、縮放scale、移動(dòng)translate、傾斜skew以及矩陣變形matrix。

過渡屬性
下面的表格列出了所有的轉(zhuǎn)換屬性：

使用transtion屬性只是規(guī)定了要如何去過渡，要想讓動(dòng)畫發(fā)生，還得要有元素狀態(tài)的改變。如何改變元素狀態(tài)呢，當(dāng)然就是在css中給這個(gè)元素定義一個(gè)類（:hover等偽類也可以），這個(gè)類描述的是過渡動(dòng)畫結(jié)束時(shí)元素的狀態(tài)。

關(guān)鍵幀動(dòng)畫（keyframes）

通過 CSS3，我們能夠創(chuàng)建動(dòng)畫，這可以在許多網(wǎng)頁中取代動(dòng)畫圖片、Flash 動(dòng)畫以及 Javas cript。

@keyframes相當(dāng)于一個(gè)命名空間，后面跟一個(gè)名詞，如果在class中的animation-name定義了與之對(duì)應(yīng)的name，那么就可以執(zhí)行動(dòng)畫了。定義動(dòng)畫時(shí)，簡單的動(dòng)畫可以直接使用關(guān)鍵字from和to，即從一種狀態(tài)過渡到另一種狀態(tài)：如：

@-webkit-keyframes demo{
from{left:0;}
to{left:400px;}
}

復(fù)雜動(dòng)畫：

@-webkit-keyframes demo{
0%{left:0;}
50%{left:200px;}
100%{left:400px;}
}

@keyframes 動(dòng)畫名稱{ 
     時(shí)間點(diǎn) {元素狀態(tài)} 
     時(shí)間點(diǎn) {元素狀態(tài)} 
}

這里面的百分百有點(diǎn)像flash里幀的概念。表示設(shè)置某個(gè)時(shí)間段內(nèi)任意時(shí)間點(diǎn)的樣式。

CSS3 動(dòng)畫屬性
下面的表格列出了 @keyframes 規(guī)則和所有動(dòng)畫屬性：

css3動(dòng)畫庫animate.css的使用

animate.css是一個(gè)css3動(dòng)畫庫，可以到github上去下載，里面預(yù)設(shè)了很多種常用的動(dòng)畫，使用也很簡單，因?yàn)樗前巡煌膭?dòng)畫綁定到了不同的類里，所以我們想要使用哪種動(dòng)畫的時(shí)候，只需要簡單的把那個(gè)相應(yīng)的類添加到元素上就行了：

css3動(dòng)畫head

圖片有點(diǎn)大讀取有點(diǎn)慢 demo

總結(jié)：

利用css3的動(dòng)畫效果能做出很多漂亮的效果，但要注意低版本的瀏覽器的不兼容，同時(shí)利用一些工具能讓我們的代碼制作起來更方便更快捷。

Ps：

    很多都是拿圖片放在這里給大家看的這樣更清楚點(diǎn)，但很多代碼復(fù)制不了，老規(guī)矩我也會(huì)附上附件給大家看下，有上面的案例，還有的部分 可以去我的個(gè)人博客去看下，地址在我站酷個(gè)人主頁里有。

    下次我會(huì)拿一個(gè)全部是css3的頁面做給大家看，筆者也是一直在學(xué)習(xí)當(dāng)中，希望各位大神，酷友能多多指點(diǎn)。