在這html5遍天下的年代，越來越多的網頁也用到了css3的動畫效果，這讓原本我們靜態的頁面有了更多的活力。最近也一直在做這方面的頁面，有些小小的心得，和諸位分享下。

CSS3的動畫絕對是很贊的，不僅支持PC還支持移動端，但也有限制，比如說瀏覽器的限制，雖然有這方面的限制，用它的人還是很多的。

CSS3 過渡(transform)

通過 CSS3，我們可以在不使用 Flash 動畫或 Javas cript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。

transform屬性能對元素對象進行變形操作，主要包括以下幾種：旋轉rotate、縮放scale、移動translate、傾斜skew以及矩陣變形matrix。

過渡屬性

下面的表格列出了所有的轉換屬性：

使用transtion屬性只是規定了要如何去過渡，要想讓動畫發生，還得要有元素狀態的改變。如何改變元素狀態呢，當然就是在css中給這個元素定義一個類(:hover等偽類也可以)，這個類描述的是過渡動畫結束時元素的狀態。

關鍵幀動畫(keyframes)

通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 Javas cript。

@keyframes相當于一個命名空間，后面跟一個名詞，如果在class中的animation-name定義了與之對應的name，那么就可以執行動畫了。定義動畫時，簡單的動畫可以直接使用關鍵字from和to，即從一種狀態過渡到另一種狀態：如：

@-webkit-keyframes demo{

from{left:0;}

to{left:400px;}

}

復雜動畫：

@-webkit-keyframes demo{

0%{left:0;}

50%{left:200px;}

100%{left:400px;}

}

@keyframes 動畫名稱{

時間點 {元素狀態}

時間點 {元素狀態}

}

這里面的百分百有點像flash里幀的概念。表示設置某個時間段內任意時間點的樣式。

CSS3 動畫屬性

下面的表格列出了 @keyframes 規則和所有動畫屬性：

css3動畫庫animate.css的使用

animate.css是一個css3動畫庫，可以到github上去下載，里面預設了很多種常用的動畫，使用也很簡單，因為它是把不同的動畫綁定到了不同的類里，所以我們想要使用哪種動畫的時候，只需要簡單的把那個相應的類添加到元素上就行了：

css3動畫head

圖片有點大讀取有點慢

總結：

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

Ps：

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

下次我會拿一個全部是css3的頁面做給大家看，筆者也是一直在學習當中，希望各位大神，酷友能多多指點。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。