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