作品來源 | https://codepen.io/
文章整理 | 楊小二
CodePen是很多程序員用來展示代碼創作的首選在線工具。今天，我爲大家精選的25個CodePen上CSS動畫展示案例，這些動畫案例作品均來源於CodePen上，所有作品均歸原創作者所有，我在這裏只是與大家分享學習使用。
並且在每個作品下面都附上了作品的源碼地址，供大家學習使用，這個gif動畫，是我在編輯文章時候，通過工具錄製的，效果可能沒有源碼地址的效果那麼流暢，如果你想查看更好的效果，建議你通過瀏覽器打開源碼地址進行查看與學習。
如果你不知道怎麼創作動畫的話，那今天25個案例，希望能夠激發你的創造靈感，讓編碼變得更加有趣。
1、JavaScript米奇手錶
源碼地址：https://codepen.io/jaysalvat/pen/ogQbKB/
這是結合CSS過渡，SVG圖形和JavaScript將指針放在可愛的米老鼠錶盤上的示例。米老鼠的兩隻手就是錶盤上的時針與分針，截圖如下：
2、 CSS打造的潛水艇
源碼地址：https://codepen.io/ajerez/pen/EaEEOW/
這款CSS動畫潛水艇的效果，是不是很好玩，特別是再做一些少兒項目的時候，再網頁添加一些這樣的動畫效果，會讓網站增添許多魅力。
3、純CSS打造的汽車Loading加載動畫
源碼地址：https://codepen.io/igor0ser/pen/amJkvp
一點微妙的動作就能營造出強烈的強度感！這款Loading動畫，採用了一輛看起來像正在行駛的汽車，全部由CSS創建。裏面沒有圖像，這將提升網頁的加載速度。
4、ASCII AT-AT
源碼地址：https://codepen.io/TimPietrusky/pen/uLbfr/
通過《星球大戰》啓發AT-AT人員運輸車，使用的文字以CSS中循環顯示的顏色繪製而成。
5、SVG / CSS加載器
源碼地址：https://codepen.io/Bidji/pen/dPEzwq/
這個是一個加載的動畫效果，使用變化的顏色給人以旋轉的印象。
6、3D CSS Tardis
源碼地址：https://codepen.io/Gerwinnz/pen/hjxzl/
這個是不是很酷，CSS可用於創建一些驚人的3D效果，有興趣的小夥伴可以試試。
7、打瞌睡的鳥
源碼地址：https://codepen.io/pmk/pen/ByXOOq/
簡單的藝術風格和適量的動畫給這隻昏昏欲睡的鳥一種生活的幻覺。
8、純CSS邊框動畫
源碼地址：https://codepen.io/Rplus/pen/lEDBj
這款簡單的CSS邊框動畫，可以用來創建加載動畫效果，也是很不錯的。
9、星球大戰：原力覺醒
源碼地址：https://codepen.io/donovanh/pen/pJzwEw
這款採用CSS，HTML和一些JavaScript創建的《星球大戰》電影的標題動畫樣式，是不是感覺這個不像代碼實現出來的？
10、3D合成器
源碼地址：https://codepen.io/suez/pen/GJKRPN/
這個3D動畫，非常好玩，你還可以通過嘗試按鍵並旋轉它。看看會發現這樣的效果。
11、太陽系
源碼地址：https://codepen.io/tadywankenobi/pen/QbWNGR/
這款太陽系模型，具有成比例的旋轉速度，衛星和每個較大行星的細節。太陽甚至是實物的實時捕捉！
12、純CSS土星玩呼啦圈
源碼地址：https://codepen.io/jcoulterdesign/pen/BrdPaw
我覺得這個是最有趣的一個動畫效果，看着就覺得好玩。這個是純CSS+HTML元素製作出來的，是不是看起來像是一個很複雜的動畫？在土星旋轉的時候，散落的粒子都是隨機的。
13、平面設計相機
源碼地址：https://codepen.io/damienpm/pen/esoJG/
這個是採用CSS+HTML+JS一起來完成的一個平面相機拍照的效果，你只要通過鼠標按下平面相機上的快門按鈕，即可看到它拍攝出來的照片效果。
14、日夜轉換
源碼地址：https://codepen.io/Catagen/pen/PqYdXR/
這個是通過開關按鈕來控制黑夜白天的轉換效果的，這個效果裏沒有使用到什麼圖像，就完成了這樣一個漂亮的背景場景。
15、CSS動畫精靈
源碼地址：https://codepen.io/samarkandiy/pen/aOoBXq/
這個小精靈動畫遊戲，但是這個我嘗試了一下，關了按鈕，這個小精靈就不再動了。這個動畫會在一些遊戲中會經常使用到。
16、十二面體
源碼地址：https://codepen.io/wontem/pen/PqYXop/
這個動畫，是純CSS打造的，主要是想演示如何將圖像序列（子畫面）用於創建定格動畫以及正向和反向運動的效果。
17、純CSS騎車人
源碼地址：https://codepen.io/miocene/pen/jLzmJq
看到這個動畫，你很難相信它就是HTML和CSS！在這裏動畫裏採用了旋轉動畫和多層分層運動相結合，使它看起來像這位自行車騎手和他的自行車都是果在運動的。
18、顏色層CSS動畫
源碼地址：https://codepen.io/yemon/pen/WzpXBx
在這組示例中，對一組半透明的HTML段落標籤進行了動畫處理，並且生成的堆疊動畫是催眠的。
19、冰淇淋裝載機
源碼地址：https://codepen.io/astrixsz/pen/RRxyKz
在這個動畫中，我們採用了一個容器div和四個其他容器，即製作出可觀看的小冰淇淋主題加載動畫。代碼文件比動畫GIF文件要小得多，而且這樣提升了網頁的加載速度。
20、純CSS鴿子
源碼地址：https://codepen.io/miocene/pen/rzmZKQ
這個動畫，也非常有意思，是不是很像我們自己呀？每天忙的跟這個鳥似的。而這個動畫就是將HTML元素與某些填充字符的動畫結合在一起，便得到了一個充滿樂趣的動畫效果。
21、睡貓動畫
源碼地址：https://codepen.io/agoodwin/pen/ypeWYE
這隻昏昏欲睡的貓，感覺好萌，將許多簡單的HTML元素與一堆微妙而有趣的動畫組合在一起，很有特色。本示例使用Sass和變量來控制動畫。嘗試更改一些元素，可以看看會發生什麼？有興趣的話，可以到源碼地址裏，進行在線修改參數。
22、黑熊動畫
源碼地址：https://codepen.io/aakash_gill/pen/WOYMwW
使用HTML和CSS可以實現流暢的動畫，尤其是當我們遵循一些基本原則時。該動畫使元素數量保持最少。
23、CSS海綿
源碼地址：https://codepen.io/miocene/pen/eEJKbo
在這個動畫演示中，我們可以學習如何通過代碼將氣泡和飛濺編排在一起，以創建帶有快樂海綿的可愛動畫，而這些動畫都沒有任何圖像。
24、純CSS複選框郵件
源碼地址：https://codepen.io/jh3y/pen/wmpMwp
在這個動畫中，我們看到了一個打開信封並收到一封信的動畫效果，這個也是在網頁中經常看到的一種動畫類型效果。
25、純CSS實現的三角動畫
源碼地址：https://codepen.io/wontem/pen/YXzVyr
這動畫只是採用了CSS,沒有用到圖片，均可以實現這個動畫效果，個人覺得還是非常不錯的，如果不知道怎麼實現的話，可以到源碼地址查看源碼進行學習。
總結
今天分享的這些動畫效果都是來源於CodePen上的一些動畫演示效果，作爲一名程序員，你除了要學會正確的使用google外，我們還需要學會使用CodePen這個在線學習工具網站，在CodePen上你會發現涵蓋各種Web開發主題的各種出色的作品案例供你學習與使用，同時你還應該學習如何創建自己的CSS動畫！
