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

March 13, 2017

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

Learn how to create reusable sets of keyframes and choreograph your animations so that they work well together.

Master @keyframes to achieve different effects.

10 hand-picked examples of Pens that teach you about animation.

Featured video

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

Loads of subtle animations in this blog - check out the random logo animations too! Super work.

Enrol now and save over 50%

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!