Motion has become a really important part of the web design field in recent years. Motion and animation add layers of dimension to an interface, aiding the user, offering feedback, delighting, and engaging along the way.
1. Get Started With Web Animation
CSS animation techniques are often a web designer’s gateway into the world of motion and the best way to get started is to check out our post.
You can also jump right in with our animation course and learn practical ways to create animations for buttons, pricing tables, and other web elements, using concise CSS and jQuery.
Creating Animated HTML5 Page Transitions
Animation in modern websites is usually limited to hover effects and banner sliders. In rare instances you might see websites that transition from one page to the next, as you experience in a mobile app. In this course, you'll learn how to build animated page transitions for the web using HTML5, CSS transitions, and jQuery.
2. Next-Level CSS Animation
A Visual Guide to CSS Animation
And because animations are highly visual, rather than getting bogged down in code we’re going to be learning visually. We’ll be using Webflow’s popular visual web design tool (via a free account) so you’ll see your animations play out in real time, as you create them.
CSS Animation Projects
Now it's time to build on what you've learned by trying some practical projects! This course use CodePen so you can easily follow along.
CSS Transitions, Keyframe Animation, and Easing
Taking your CSS animation to the next-level requires an understanding of how to use transitions, keyframe animation, and how to add depth and personality to your animation.
We have two Coffee Break Courses, each just over 10 minutes long, that will get you started creating animations using the CSS transition, keyframe, and animation properties. The third Coffee Break Course will introduce you to easing with cubic bezier functions and show you how to add more life to your CSS animations.
A Guide to Animation Performance on the Web
On today’s web, animations play a big role in user experience and the delivery of information. The days of slow browsers are long gone, and the browsers we have today make use of the latest technologies to ensure our experience is as good as possible. Therefore, most of the time we get silky smooth, high-performance animations.
In this course, you’ll learn how to create these smooth animations, how browsers work behind the scenes, and also how to measure animation performance.
With the growing support for WebGL in the browser, it’s becoming more and more feasible to create complex 3D graphics and animations for the web. With Three.js you can start to create your own 3D graphics in the browser.
The GreenSock Animation Platform
More Animation Resources
We also have several other courses on animation that you might be interested in checking out, or you can browse the animation category on Envato Tuts+.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly