Border Animation by Sean McCaffery
Made only with CSS, a border forms smoothly around the text, when you hover over the "HOVER" instruction.
style="width: 100%;" src="http://codepen.io/seanmccaffery/embed/xBpbG/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
Elastic SVG Sidebar by Nikolay Talanov
The sidebar becomes elastic when you try to pull it away from the side. A nice concept applied on a Material Design-inspired application sidebar.
style="width: 100%;" src="http://codepen.io/suez/embed/emjwvP/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
Pull Down to Refresh by Nikolay Talanov
Most pages allow you to "pull down" on the page to refresh. With this animation, when you "release" the page, the Send icon changes into a Plane icon and gets released into the air.
style="width: 100%;" src="http://codepen.io/suez/embed/oXLroX/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
Animated Gradient on Text by Patrick Young
Here’s a subtle but not easy to miss moving text gradient that typography lovers will love.
style="width: 100%;" src="http://codepen.io/ISOgenesis/embed/zxEXPg/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
Heart Animation by Nikolay Talanov
This animation shows you how a heart icon is made from two circles and a square. The transformation is done with CSS animation.
style="width: 100%;" src="http://codepen.io/ISOgenesis/embed/ZGWbmE/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
Let’s Travel by jjperezaguinaga
An animation that illustrate cities and popular tourist destinations in the world. The moves and transformations are created using CSS animation.
style="width: 100%;" src="http://codepen.io/jjperezaguinaga/embed/yuBdq/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
Menu toggle animation by Tamino Martinius
A morphing animation of the hamburger icon turning into a cross icon. See how smooth the transition is between the two objects.
style="width: 100%;" src="http://codepen.io/Zaku/embed/vcaFr/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
Animated Infographic by Sdras
An awesome animation by Sarah Drasner, powered by GSAP timeline. It is an infographic come to life, made with animation. Use the slider to access the frames from any point.
style="width: 100%;" src="http://codepen.io/sdras/embed/JdJgrB/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
Rain-Bros don’t like JS by cihadturhan
A unique and funny loop animation depicting the characters’ walk. The movement of the objects in this demo is a combination of SVG and CSS3 animation. The legs use SVG animation while other parts use CSS3 animation.
style="width: 100%;" src="http://codepen.io/cihadturhan/embed/jwipD/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
Clock by Mohamad Mohebifar
Watch the smooth movement of the second-hand in this clock showing the current time. The animation is completely made using the SVG animation functionality.
style="width: 100%;" src="http://codepen.io/mohebifar/embed/KwdeMz/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
Rainbow Rocket Man by Chris Gannon
An astronaut shooting into space with it’s rainbow-powered jet pack(?). Nice animation made using the GSAP Tweenmax plugin.
style="width: 100%;" src="http://codepen.io/chrisgannon/embed/EjVyXN/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
Animated Icon by Luigi De Rosa
However over these animated SVG icons to check out what they can do. The creator made this using GSAP.
style="width: 100%;" src="http://codepen.io/luruke/embed/mbnkA/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
Flat Workspace by Hoàng Nhật
The animation illustrates a workspace in flat style design. The creator used GSAP to make this awesome animation of a workstation forming.
style="width: 100%;" src="http://codepen.io/thiennhat/embed/BNByzJ/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
The clickable animated icon by Hamish Williams
This is a cool animation makes use of the snap.svg library. Click to see mail being "sent".
style="width: 100%;" src="http://codepen.io/HamishMW/embed/XJogMg/?height=380&theme-id=12825&default-tab=result" frameborder="no" scrolling="no" width="300" height="380">
- 网站开发中很有用的 jQuery 效果【附源码】
- 分享35个让人惊讶的 CSS3 动画效果演示
- 十分惊艳的8个 HTML5 & JavaScript 特效
- Web 开发中很实用的10个效果【源码下载】
- 12款经典的白富美型 jQuery 图片轮播插件
本文链接：带给你灵感：30个超棒的 SVG 动画展示【上篇】
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源