在這html5遍天下的年代，越來(lái)越多的網(wǎng)頁(yè)也用到了css3的動(dòng)畫(huà)效果，這讓原本我們靜態(tài)的頁(yè)面有了更多的活力。最近也一直在做這方面的頁(yè)面，有些小小的心得，和諸位分享下。

CSS3的動(dòng)畫(huà)絕對(duì)是很贊的，不僅支持PC還支持移動(dòng)端，但也有限制，比如說(shuō)瀏覽器的限制，雖然有這方面的限制，用它的人還是很多的。

CSS3 過(guò)渡(transform)

通過(guò) CSS3，我們可以在不使用 Flash 動(dòng)畫(huà)或 Javas cript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。

transform屬性能對(duì)元素對(duì)象進(jìn)行變形操作，主要包括以下幾種：旋轉(zhuǎn)rotate、縮放scale、移動(dòng)translate、傾斜skew以及矩陣變形matrix。

過(guò)渡屬性

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

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

關(guān)鍵幀動(dòng)畫(huà)(keyframes)

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

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

@-webkit-keyframes demo{

from{left:0;}

to{left:400px;}

}

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

@-webkit-keyframes demo{

0%{left:0;}

50%{left:200px;}

100%{left:400px;}

}

@keyframes 動(dòng)畫(huà)名稱{

時(shí)間點(diǎn) {元素狀態(tài)}

時(shí)間點(diǎn) {元素狀態(tài)}

}

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

CSS3 動(dòng)畫(huà)屬性

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

css3動(dòng)畫(huà)庫(kù)animate.css的使用

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

css3動(dòng)畫(huà)head

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

總結(jié)：

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

Ps：

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

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

總結(jié)

以上是生活随笔為你收集整理的css3案例分析,CSS3动画/动画库以及案例分析（上）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。