CodePen is a great place to find inspiration and see what crazy UI experiments others are coming up with. As well as this, it’s also a useful place to find educational content. In this roundup we’ll explore some cool examples of CodePens that teach us all about web animation.
1. How Keyframes Work
This CodePen illustrates how browsers read through the sequence of steps in a
2. Performant CSS Animation for Beginners
When we animate with CSS we have a vast array of properties to animate. However, not all are a good idea. Animating the wrong properties can make for slow, janky animations. This example from Ian Hazelton explains how the most efficient four properties work.
3. Keyframes Animation Demo
Sometimes a simple example is all you need. This example shows how the
to syntax can be used in a simple keyframe.
4. requestAnimationFrame Demo
requestAnimationFrame API can be used to play and pause.
5. How to ChartJS
A great use of inline comments that demonstrate how to create two animated charts using ChartJS.
6. HTML5 Canvas Guide for Beginners
A nicely commented guide to using Canvas, by Petr Tichy.
7. Convert GIF to CSS Animations
Sometimes you don’t need a rendered GIF to get a fancy animation effect. These CSS-only examples from Joey Cheng are a useful example of what’s possible.
8. animateTransform Examples
Chris Coyier demonstrates how to use SVG’s
9. CSS Transforms: 3D Example and TransitionEnd
10. Switching Animation Keyframes in Media Queries
Another great one to bookmark–this example shows how we can change animations using
media queries. Resize the screen to see the effect!
Bonus: CSS Motion Paths
Lastly, let’s glimpse into the future of SVG animation with this demo showing how the
motion-path property allows us to create complex paths of motion for our animations.
That’s a Wrap!
These are just a handful of the demos, blogs and walkthroughs available on CodePen. CodePen isn’t just great for animation though; try searching and you’ll find all sorts of great info and demos covering all manner of web development topics. Explore, learn, and have fun!
More Animation Resources
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
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post