共计 2663 个字符，预计需要花费 7 分钟才能阅读完成。
设计人员使用 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