CSS Animation Weekly #26 - End states, The Wave, CSS particles and more

This week we're learning about using keyframes efficiently, cutting edge crazy SVG stuff, and checking out loads of great CSS animated demos.

♥️

Donovan at CSSAnimation.rocks

Articles

Chris Coyier brings us some experimental SVG filter animation - best viewed in Chrome.

Inspiration

This sort of demo usually makes use of JavaScript and Canvas, so it's refreshing to see it handled with pure CSS.

CSS Transforms and Animations on an SVG icon - lovely example of the benefits of animating with SVG. 

Fantastic animated space person on this 404 demo 👩‍🚀

Mesmerising spinner effect created with just CSS.

This full screen wipe / transition might come in handy for moving between views.

Tearing away the pages on this CSS animated calendar.

Intriguing use of space between letters in this simple demo.

Fun demo of a car flying down the highway 🚙

Animation in the real world

Full-screen transitions abound in this coffee shop website. 🙌 ☕️

Ana Tudor explains how we can use a single set of keyframes to animate to different end states.