CodePen 是一個在線的前端代碼編輯和展示網站，能夠編寫代碼並即時預覽效果。你在上面可以在線分享自己的 Web 作品，也可以欣賞到世界各地的優秀開發者在網頁中實現的各種令人驚奇的效果。
今天這篇文章為大家挑選了15個超炫的 CSS 動畫效果的例子，這些 Demo 可以說都是藝術品。（為保證最佳的效果，請在 Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽）
9. 3D Synth
Pure CSS 3D Synthesizer (mousedown for rotation) by Nikolay Talanov (@suez).
使用純 CSS 制作的 3D 電子琴效果，點擊鼠標可以旋轉。
10. Cascading Solar System
Cascading Solar System! by Tady Walsh (@tadywankenobi).
太陽系的模型，完成了旋轉速度、衛星和每一個大的行星的細節。看起來就像現實世界的東西！
11. 3D Solar System
Full CSS 3D Solar System by Wayne Dunkley (@waynedunkley).
另一個太陽系的系統模型，不過這個是 3D 的，有美麗的陰影效果。
12. Flat Design Camera
Flat design camera with CSS animation by Damien Pereira Morberto (@damienpm).
使用CSS動畫模擬在相機上按下快門，拍攝照片的動畫效果。
13. Day and Night Transition
Day Night simulation by Szymon Stypa (@Catagen).
點擊下面的按鈕可以看到白天和黑夜的模擬效果。
14. Animated Sprite with CSS
Animate sprite with CSS by Avaz Bokiev (@samarkandiy).
示范序列圖像（雪碧圖）可以用來創建定格動畫，配有正向和反向運動。
15. Dodecahedron
Dodecahedron by wontem (@wontem).
一個完全用 CSS 創建的微妙的，美麗的十二面體動畫。
頁面加載太卡了，上篇請查看這里《15個來自 CodePen 的酷炫 CSS 動畫效果【下篇】》
=======================================================