30個很棒的SVG動畫

設計人員使用CSS在HTML元素中建立動畫。然而，因爲HTML元素在建立模式、形狀等方面的侷限性，它們天然會轉向SVG，後者提供了更有趣的功能。

使用SVG，咱們享受到了對SVG動畫良好的瀏覽器支持，而且咱們有更多的方法來建立新的動畫。您能夠同時使用內置的SVG動畫功能或CSS3動畫（請注意，並非全部的事情均可以經過CSS完成，因此仍然須要JavaScript）。另外一種方法是使用GSAP或Snap等JavaScript引擎。JS是建立動畫的良好實踐。

這裏有一些很棒的動畫SVG。一些使用SVG動畫，另外一些使用CSS轉換來製做基本動畫，其他的使用JavaScript的幫助。

Border Animationby Sean McCaffery

僅用CSS製做，當你將鼠標懸停在「hover」指令上時，邊框會平滑地圍繞文本造成。

demo

Elastic SVG Sidebar by Nikolay Talanov

當你試圖把側邊欄從側面拉開時，它會變得有彈性。一個不錯的概念應用於一個材料設計靈感的應用程序側邊欄。

demo

Pull Down to Refresh by Nikolay Talanov

大多數頁面容許您「下拉」頁面進行刷新。使用此動畫，當您「釋放」頁面時，「發送」圖標將變爲平面圖標並釋放到空中。

demo

Animated Gradient on Text by Patrick Young

這裏有一個微妙但不容易錯過的移動文本梯度，排版愛好者會喜歡。

demo

Heart Animation by Nikolay Talanov

這個動畫向你展現了一個心臟圖標是如何由兩個圓和一個正方形組成的。轉換是用CSS動畫完成的。

demo

Let’s Travel by jjperezaguinaga

一個動畫，說明城市和受歡迎的旅遊目的地在世界上。移動和轉換是使用CSS動畫建立的。

demo

Menu toggle animation by Tamino Martinius

漢堡圖標變成十字圖標的變形動畫。查看兩個對象之間的過渡有多平滑。

Menu toggle animation

Animated Infographic by Sdras

Sarah Drasner的精彩動畫，由GSAP timeline提供動力。這是一個活生生的信息圖，用動畫製做。使用滑塊從任意點訪問幀。

demo

Rain-Bros don’t like JS by cihadturhan

一個獨特有趣的循環動畫描繪了角色的行走。在這個演示中，對象的移動是SVG和CSS3動畫的結合。腿部使用SVG動畫，其餘部分使用CSS3動畫。

demo

Clock by Mohamad Mohebifar

在這個顯示當前時間的時鐘中，觀察秒針的平穩移動。動畫徹底是使用SVG動畫功能製做的。

demo

Rainbow Rocket Man by Chris Gannon

一名宇航員用彩虹動力噴氣發動機向太空射擊。使用GSAP Tweenmax插件製做的動畫不錯。

Rainbow Rocket Man

Animated Icon by Luigi De Rosa

不過，在這些動畫SVG圖標上看看它們能作些什麼。建立者使用GSAP建立了這個。

Animated Icon

Flat Workspace by Hoàng Nhật

動畫演示了平面樣式設計中的工做空間。創做者使用GSAP 製做了一個工做站造成的使人敬畏的動畫。

Flat Workspace

The clickable animated icon by Hamish Williams

這是一個很酷的動畫利用快照.svg圖書館。點擊查看「已發送」郵件。

The clickable animated icon

Diving by Chris Gannon

你有沒有跳過湖面上的石頭？下面是一個簡單的SVG路徑動畫演示，可是沒有石頭，也沒有湖。

Diving

Motion for the web by LegoMushroom

它有動畫，優美的曲調，超級酷的文字入口，有什麼不喜歡的？基於mo.js，一個運動圖形JavaScript庫。

Motion for the web

Animated writing font by Lee Porter

除了使用SVG來繪製一個形狀的路徑動畫以外，您還能夠在排版上使用它，就像這個建立者所作的同樣。模糊效果使它更棒。

Animated writing font

Gooey menu by Lucas Bebber

在這個設計中，你能夠盡情享受gooey效果，這是使用SVG過濾器和添加CSS動畫製做的。結果是現實的，很是酷，你能夠玩四個不一樣的版本。

Gooey menu

New Cake by Marco Barría

如何用SVG和CSS動畫製做一個分層的生日蛋糕。

New Cake

Thank you by Rachel Smith

只要看看這個簡單的感謝信的精彩動畫。它是使用SVG和GSAP TweenMax庫建立的。

Thank you

CSS vs SVG by Mario Sanchez Maselli

如今讓咱們看一下CSS和SVG動畫的比較，你看到區別了嗎？

CSS vs SVG

Walking Dog by Mark Nelson

另外一種使SVG動畫化的方法是使用精靈圖像，就像這個建立者所作的那樣。

Walking Dog

Hourglass loader by Leela

使用純SVG動畫（SMIL）製做的創意做品；這裏沒有CSS或JS來製做動畫。

Hourglass loader

Logo Animation by Adem ilter

這是一個很好的動畫logo介紹使用內聯SVG動畫。沒有CSS或JS可讓一切正常工做。

Logo Animation

Stats animation by Jonas Badalic

一個漂亮的統計圖形與SVG動畫支持快照.SVG圖書館。

Stats animation

Ouroboros by Noel Delgado

一個驚人的SVG動畫路徑。在使用以前，建立者首先在SVG上繪製了一條路徑使用tween.js 添加動畫。

Ouroboros

Creative Gooey Effects by Lucas Bebber

下面是七種SVG過濾器的創造性應用，能夠產生一種粘粘的效果。音樂可視化是個人最愛，動畫看起來很不錯。

Creative Gooey Effects

Throw the cow by Sarah Drasner

這是一個由TweenMax提供支持的SVG動畫，只是爲了好玩。牽着牛繞着地球轉。它將在「軌道」中旋轉。

Throw the cow

Animated Logo by Ali

動畫能夠是一個很好的小補充起泡啤酒標誌。漂亮的小浮動氣泡徹底是用SVG原生動畫語法構建的。

Animated Logo