帅气的vg动画（30个很棒的SVG动画）
作者：MrWang
转发链接：https://segmentfault.com/a/1190000023090287
前言设计人员使用CSS在HTML元素中创建动画。然而，由于HTML元素在创建模式、形状等方面的局限性，它们自然会转向svg。
使用SVG，我们享受到了对SVG动画良好的浏览器支持，并且我们有更多的方法来创建新的动画。您可以同时使用内置的SVG动画功能或CSS3动画（请注意，并不是所有的事情都可以通过CSS完成，所以仍然需要JavaScript）。另一种方法是使用GSAP或Snap等JavaScript引擎。JS是创建动画的良好实践。
这里有一些很棒的动画SVG。一些使用SVG动画，另一些使用CSS转换来制作基本动画，其余的使用JavaScript的帮助。
Border Animationby Sean McCaffery地址：https://codepen.io/seanmccaffery/
仅用CSS制作，当你将鼠标悬停在“hover”指令上时，边框会平滑地围绕文本形成。
地址：https://codepen.io/suez/
当你试图把侧边栏从侧面拉开时，它会变得有弹性。一个不错的概念应用于一个材料设计灵感的应用程序侧边栏。
地址：https://codepen.io/suez/
大多数页面允许您“下拉”页面进行刷新。使用此动画，当您“释放”页面时，“发送”图标将变为平面图标并释放到空中。
地址：https://codepen.io/ISOgenesis/
这里有一个微妙但不容易错过的移动文本梯度，排版爱好者会喜欢。
地址：https://codepen.io/suez/
这个动画向你展示了一个心脏图标是如何由两个圆和一个正方形组成的。转换是用CSS动画完成的。
地址：https://codepen.io/jjperezaguinaga/
一个动画，说明城市和受欢迎的旅游目的地在世界上。移动和转换是使用CSS动画创建的。
地址：https://codepen.io/Zaku
汉堡图标变成十字图标的变形动画。查看两个对象之间的过渡有多平滑。
地址：https://codepen.io/sdras/
Sarah Drasner的精彩动画，由GSAP timeline提供动力。这是一个活生生的信息图，用动画制作。使用滑块从任意点访问帧。
地址：https://codepen.io/cihadturhan/
一个独特有趣的循环动画描绘了角色的行走。在这个演示中，对象的移动是SVG和CSS3动画的结合。腿部使用SVG动画，其他部分使用CSS3动画。
地址：https://codepen.io/mohebifar
在这个显示当前时间的时钟中，观察秒针的平稳移动。动画完全是使用SVG动画功能制作的。
地址：https://codepen.io/chrisgannon
一名宇航员用彩虹动力喷气发动机向太空射击。使用GSAP Tweenmax插件制作的动画不错。
地址：https://codepen.io/luruke/
不过，在这些动画SVG图标上看看它们能做些什么。创建者使用GSAP创建了这个。
地址：https://codepen.io/thiennhat/
动画演示了平面样式设计中的工作空间。创作者使用GSAP 制作了一个工作站形成的令人敬畏的动画。
地址：https://codepen.io/HamishMW
这是一个很酷的动画利用快照.svg图书馆。点击查看“已发送”邮件。
地址：https://codepen.io/chrisgannon
你有没有跳过湖面上的石头？下面是一个简单的SVG路径动画演示，但是没有石头，也没有湖。
地址：https://codepen.io/sol0mka
它有动画，优美的曲调，超级酷的文字入口，有什么不喜欢的？基于mo.js，一个运动图形JavaScript库。
地址：https://codepen.io/elevaunt
除了使用SVG来绘制一个形状的路径动画之外，您还可以在排版上使用它，就像这个创建者所做的一样。模糊效果使它更棒。
地址：https://codepen.io/lbebber
在这个设计中，你可以尽情享受gooey效果，这是使用SVG过滤器和添加CSS动画制作的。结果是现实的，非常酷，你可以玩四个不同的版本。
地址：https://codepen.io/fixcl
如何用SVG和CSS动画制作一个分层的生日蛋糕。
地址：https://codepen.io/rachsmith/
只要看看这个简单的感谢信的精彩动画。它是使用SVG和GSAP TweenMax库创建的。
地址：http://cssdeck.com/user/mariosmaselli
现在让我们看一下CSS和SVG动画的比较，你看到区别了吗？
地址：https://codepen.io/marknelson/pen/KwJmjj
另一种使SVG动画化的方法是使用精灵图像，就像这个创建者所做的那样。
地址：https://codepen.io/madetoday
使用纯SVG动画（SMIL）制作的创意作品；这里没有CSS或JS来制作动画。
地址：https://codepen.io/ademilter/
这是一个很好的动画logo介绍使用内联SVG动画。没有CSS或JS可以让一切正常工作。
地址：https://codepen.io/JonasB/
一个漂亮的统计图形与SVG动画支持快照.SVG图书馆。
地址：https://codepen.io/noeldelgado/
一个惊人的SVG动画路径。在使用之前，创建者首先在SVG上绘制了一条路径使用tween.js 添加动画。
地址：http://twitter.com/lucasbebber
下面是七种SVG过滤器的创造性应用，可以产生一种粘粘的效果。音乐可视化是我的最爱，动画看起来很不错。
地址：https://codepen.io/sdras
这是一个由TweenMax提供支持的SVG动画，只是为了好玩。牵着牛绕着地球转。它将在“轨道”中旋转。
地址：https://codepen.io/alistairtweedie/
动画可以是一个很好的小补充起泡啤酒标志。漂亮的小浮动气泡完全是用SVG原生动画语法构建的。
作者：MrWang
转发链接：https://segmentfault.com/a/1190000023090287
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
