CSS Animation Weekly #33 - Hero headers, keyframes and inspiration

This week we learn how to animate a hero header, master our keyframes and learn from CodePen examples
CSS Animation Weekly #33 - Hero headers, keyframes and inspiration
By CSS Animation Weekly • Issue #33
This week we learn how to animate a hero header, master our keyframes and learn from CodePen examples. On top of that we have two helpful SVG and animations tools, and some seriously amazing inspiration.
♥️
Donovan at CSSAnimation.rocks

Articles
Animating your hero header
Learn how to create reusable sets of keyframes and choreograph your animations so that they work well together.
Easy CSS Animation Using @keyframes
Master @keyframes to achieve different effects.
10 Examples of Animation on CodePen You Can Learn From
10 hand-picked examples of Pens that teach you about animation.
Featured video
[Video] Lesson - Introducing the titles
In this special free video lesson Donovan Hutchinson shows you how to create a reusable animation class, sculpt custom timing functions, and choreograph multiple elements at once.
Tools
Shape Shifter is a web-app that simplifies the process of creating SVG-based path morphing animations.
Just released, this looks awesome. “Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.”
Inspiration
Stunning CSS & HTML demo of animated X-men
codepen.io  •  Share
Adding a new angle to the Facebook emoji reactions 😍
codepen.io  •  Share
A beautifully animated book cover 📚
codepen.io  •  Share
The tiny pixel is sle… snoring 😴
codepen.io  •  Share
Gorgeous zooming 3D effect!
codepen.io  •  Share
This is an amazing example of hover effects used to create an game using only CSS and HTML! 😲
codepen.io  •  Share
Princess Mononoke spirit-style tribute with some great animations and parallax.
codepen.io  •  Share
Animation in the real world
Magoz Blog
Loads of subtle animations in this blog - check out the random logo animations too! Super work.
Enrol now and save over 50%
Level Up your CSS animation skills
Learn how to bring animation to your web projects with this practical video course. Launching soon, you can now pre-enrol, get preview content, be part of the CSS Animation community and get the course for less than half price! Let’s do this!
Did you enjoy this issue?
CSS Animation Weekly
CSS Animation Weekly is a roundup of all the latest CSS animation articles and inspiration. Subscribe now and never miss an issue.
Carefully curated by CSS Animation Weekly with Revue. If you were forwarded this newsletter and you like it, you can subscribe here. If you don't want these updates anymore, please unsubscribe here.