css动画2张图过渡_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”指令上时，边框会平滑地围绕文本形成。

Elastic SVG Sidebar by Nikolay Talanov

地址：https://codepen.io/suez/

当你试图把侧边栏从侧面拉开时，它会变得有弹性。一个不错的概念应用于一个材料设计灵感的应用程序侧边栏。

Pull Down to Refresh by Nikolay Talanov

地址：https://codepen.io/suez/

大多数页面允许您“下拉”页面进行刷新。使用此动画，当您“释放”页面时，“发送”图标将变为平面图标并释放到空中。

Animated Gradient on Text by Patrick Young

地址：https://codepen.io/ISOgenesis/

这里有一个微妙但不容易错过的移动文本梯度，排版爱好者会喜欢。

Heart Animation by Nikolay Talanov

地址：https://codepen.io/suez/

这个动画向你展示了一个心脏图标是如何由两个圆和一个正方形组成的。转换是用CSS动画完成的。

Let’s Travel by jjperezaguinaga

地址：https://codepen.io/jjperezaguinaga/

一个动画，说明城市和受欢迎的旅游目的地在世界上。移动和转换是使用CSS动画创建的。

Menu toggle animation by Tamino Martinius

地址：https://codepen.io/Zaku

汉堡图标变成十字图标的变形动画。查看两个对象之间的过渡有多平滑。

Animated Infographic by Sdras

地址：https://codepen.io/sdras/

Sarah Drasner的精彩动画，由GSAP timeline提供动力。这是一个活生生的信息图，用动画制作。使用滑块从任意点访问帧。

Rain-Bros don’t like JS by cihadturhan

地址：https://codepen.io/cihadturhan/

一个独特有趣的循环动画描绘了角色的行走。在这个演示中，对象的移动是SVG和CSS3动画的结合。腿部使用SVG动画，其他部分使用CSS3动画。

Clock by Mohamad Mohebifar

地址：https://codepen.io/mohebifar

在这个显示当前时间的时钟中，观察秒针的平稳移动。动画完全是使用SVG动画功能制作的。

Rainbow Rocket Man by Chris Gannon

地址：https://codepen.io/chrisgannon

一名宇航员用彩虹动力喷气发动机向太空射击。使用GSAP Tweenmax插件制作的动画不错。

Animated Icon by Luigi De Rosa

地址：https://codepen.io/luruke/

不过，在这些动画SVG图标上看看它们能做些什么。创建者使用GSAP创建了这个。

Flat Workspace by Hoàng Nhật

地址：https://codepen.io/thiennhat/

动画演示了平面样式设计中的工作空间。创作者使用GSAP 制作了一个工作站形成的令人敬畏的动画。

The clickable animated icon by Hamish Williams

地址：https://codepen.io/HamishMW

这是一个很酷的动画利用快照.svg图书馆。点击查看“已发送”邮件。

Diving by Chris Gannon

地址：https://codepen.io/chrisgannon

你有没有跳过湖面上的石头？下面是一个简单的SVG路径动画演示，但是没有石头，也没有湖。

Motion for the web by LegoMushroom

地址：https://codepen.io/sol0mka

它有动画，优美的曲调，超级酷的文字入口，有什么不喜欢的？基于mo.js，一个运动图形JavaScript库。

Animated writing font by Lee Porter

地址：https://codepen.io/elevaunt

除了使用SVG来绘制一个形状的路径动画之外，您还可以在排版上使用它，就像这个创建者所做的一样。模糊效果使它更棒。

Gooey menu by Lucas Bebber

地址：https://codepen.io/lbebber

在这个设计中，你可以尽情享受gooey效果，这是使用SVG过滤器和添加CSS动画制作的。结果是现实的，非常酷，你可以玩四个不同的版本。

New Cake by Marco Barría

地址：https://codepen.io/fixcl

如何用SVG和CSS动画制作一个分层的生日蛋糕。

Thank you by Rachel Smith

地址：https://codepen.io/rachsmith/

只要看看这个简单的感谢信的精彩动画。它是使用SVG和GSAP TweenMax库创建的。

CSS vs SVG by Mario Sanchez Maselli

地址：http://cssdeck.com/user/mariosmaselli

现在让我们看一下CSS和SVG动画的比较，你看到区别了吗？

Walking Dog by Mark Nelson

地址：https://codepen.io/marknelson/pen/KwJmjj

另一种使SVG动画化的方法是使用精灵图像，就像这个创建者所做的那样。

Hourglass loader by Leela

地址：https://codepen.io/madetoday

使用纯SVG动画(SMIL)制作的创意作品；这里没有CSS或JS来制作动画。

Logo Animation by Adem ilter

地址：https://codepen.io/ademilter/

这是一个很好的动画logo介绍使用内联SVG动画。没有CSS或JS可以让一切正常工作。

Stats animation by Jonas Badalic

地址：https://codepen.io/JonasB/

一个漂亮的统计图形与SVG动画支持快照.SVG图书馆。

Ouroboros by Noel Delgado

地址：https://codepen.io/noeldelgado/

一个惊人的SVG动画路径。在使用之前，创建者首先在SVG上绘制了一条路径使用tween.js 添加动画。

Creative Gooey Effects by Lucas Bebber

地址：http://twitter.com/lucasbebber

下面是七种SVG过滤器的创造性应用，可以产生一种粘粘的效果。音乐可视化是我的最爱，动画看起来很不错。

Throw the cow by Sarah Drasner

地址：https://codepen.io/sdras

这是一个由TweenMax提供支持的SVG动画，只是为了好玩。牵着牛绕着地球转。它将在“轨道”中旋转。

Animated Logo by Ali

地址：https://codepen.io/alistairtweedie/

动画可以是一个很好的小补充起泡啤酒标志。漂亮的小浮动气泡完全是用SVG原生动画语法构建的。

作者：MrWang

转发链接：https://segmentfault.com/a/1190000023090287