This week we're taking on the challenge of bringing animation into our design process, and delving into all sorts of great examples of inspiring CSS animation.

♥️

Donovan at CSSAnimation.rocks

Articles

Stop Leaving Animation to the Last Minute — 24ways.org

Val Head shows us ways we can involve animation in our design process earlier.

Inspiration

Procedural Snowflakes — codepen.io

Oh it's beginning to feel a lot like... procedural snowflakes ❄️

Cotton Bureau - Motion Lockup — codepen.io

Classy set of transitions revealing the parts in this Cotton Bureau logo ✨

Only CSS: Showcase Car

Lovely example of 3D animated CSS! Select the options to see it animate too 🚗

Border transformations — codepen.io

Amazing what can be achieved with some HTML elements and a hover transition! Check out these border effects.

Spinning circles animation — codepen.io

Don't let the simple name fool you, this is a mind-bindingly awesome bit of CSS animation 💫

Coffee Machine Animation — codepen.io

Just in time for the morning brew ☕️

Pure CSS Ice Cream — codepen.io

Yayyyy! I'm an ice cream 🍦

Animation in the real world

WonderBill — www.wonderbill.com

Loads of subtle animations on this new page for London-based Wonderbill. From the procedurally generated diamonds that appear in the header, through scrolling animations, this makes good use of subtle movement.