CSS3為我們帶來了令人驚歎的新特性，而最有趣的就是CSS動畫。向大家推薦這50個CSS動畫集合可以讓你通過使用JavaScript函式來讓動畫更生動。為了能夠預覽到這些驚人的CSS3技術帶來的動畫特效，請大家使用如Safari和Chrome這類基於WebKit核心的瀏覽器。(IE瀏覽器謝絕觀賞~)

　　使用CSS3的基本變形特性:rotate，並結合了jQuery這類javaScript框架製作的CSS3時鐘效果。

2.模擬時鐘

　　模擬時鐘基於過渡webkit和CSS3變形，javascript用於將其按當前時間轉動。

　　你可以使用上、下、左、右方向鍵控制這個3D立方體，它是基於webkit-perspective, -webkit-transform 和 -webkit-transition 建立。

　　多種3D立方體使用CSS3和它的屬性‘transform’ 和 ‘transition’ ，我個人覺得效果很震撼，你能看到寫在3D立方體上的透視感極強的文字。

　　使用CSS3實現的手風琴選單效果，基於webkit瀏覽器專有屬性。

　　自動滾動視差效果使用WebKit的 CSS transition 屬性。該效果無需JavaScript。

　　Isocube有些類似於3D立方體，但也有不同之處，它可以讓他片貼在立方體面。

　　黑客帝國是最棒的科幻小說改編電影之一，現在使用純CSS就能實現電影中的矩陣效果。

　　7種CSS3結合javascript技術的特效例項. 所包含的效果有淡入淡出, 震動, 輕移, 擴大, 跳動, 旋轉 和 手風琴效果。

　　六個由CSS3替代JavaScript而實現的滑鼠懸停圖片效果，CSS3實現這種懸停效果依然很炫！

14.寶利來畫廊

　　寶利來畫廊是由CSS3技術實現的將一些照片堆在一起，有趣的是滑鼠懸停照片是，照片會旋轉並緩慢放大~

15.太空

　　CSS3模擬的mac作業系統選單…

18.滑動的唱片

　　該效果使用了CSS3過渡和些許HTML，在它上面放一個唱片專輯會看上去更生動。

　　該效果會將一個照片列表按順序排列，並把它們按不同的角度旋轉，使用了CSS2和CSS3技術，無JavaScript。它從圖片的alt屬性中讀取出照片描述並放到了照片的下方。

　　第一個CSS3逐幀動畫例項需要你持續使用滑鼠點選圖片，當播放到最後一幀時它會自動播放第一幀，如此迴圈，但第一個例項只能在FireFox和Opera下實現。第二個Css3逐幀動畫例項需要你使用滑鼠在圖片上移動，依舊是mousemove這個動作，只要滑鼠在移動圖片動畫就會持續播放，但動畫的播放速度是與你的滑鼠移動速度有關的，該例項支援Safari, Google Chrome, IE8, Firefox 和 Opera。

49.平滑選單欄