- CSS Animation Weekly
- Posts
- CSS Animation Weekly #33 - Hero headers, keyframes and inspiration
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. On top of that we have two helpful SVG and animations tools, and some seriously amazing inspiration.
♥️
Donovan at CSSAnimation.rocks
Articles
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/2349cefc-c48d-4e0d-8229-ea987b63439c/home.jpg)
Learn how to create reusable sets of keyframes and choreograph your animations so that they work well together.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/53ce0e27-2301-4ec9-aa10-3ce785efdba0/animation.jpg)
Master @keyframes to achieve different effects.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/86382da9-35f2-4e4e-9329-a7132b3ec1ba/pre.png)
10 hand-picked examples of Pens that teach you about animation.
Featured video
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/4ff55adf-534b-48ba-8998-e89f1d141fcb/maxresdefault.jpg)
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
Adding a new angle to the Facebook emoji reactions 😍
A beautifully animated book cover 📚
The tiny pixel is sle... snoring 😴
Gorgeous zooming 3D effect!
This is an amazing example of hover effects used to create an game using only CSS and HTML! 😲
Princess Mononoke spirit-style tribute with some great animations and parallax.
Animation in the real world
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/193d50df-8a0d-4ee7-aa95-0501d87c0934/magoz-light-animation-jose-lorenzo.png)
Loads of subtle animations in this blog - check out the random logo animations too! Super work.
Enrol now and save over 50%
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/84b46a51-a951-4489-a978-0be525170468/rObmmDOxSYmssAWgAL3a.png)
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!