Here's the latest CSS animation tutorials and inspiration from around the web. This week we're learning how to create amazing HTML and CSS artwork, animating our Vue.js and After Effects projects, and we add a new flavour to the old Hamburger menu. Enjoy!

🍔

Donovan at CSSAnimation.rocks 

Articles

Pocket Guide to CSS only Drawings and Animations

A wonderfully written and thorough guide to create and animating drawings using only HTML and CSS - bookmark it! 🙌

Intro to Vue.js: Animations | CSS-Tricks — css-tricks.com

Learning the front-end magic of Vue.js and want to know how to spice up your UI with animations? Sarah Drasner has it covered. 🔽

Lottie — airbnb.design

Air BnB does some great work in open source. Here they introduce their new tool for bringing After Effects animations to the web and native mobile.

Building a Morphing Hamburger Menu with CSS | Scotch — scotch.io

A slick transition converts this Hamburger menu icon into a list of options. See how it's done in this tutorial. 🍔

Get help and discounts by being a supporter

A big thank you to my supporters on Patreon! Pledge as little as $1 a month and get first access to new content, course discounts and more. Your support is appreciated.

Inspiration

CSS 3D Alternating Text

A great HTML and CSS trick to create 3D-style text without any JavaScript.

Ratings Inspiration

Loads of inspiration here on how to reward your visitors with an animation when they leave a rating 💫

A Pile of Envelopes

Cool little hover animation on this CSS animated pile of envelopes 💌

Color Palette with Pure CSS Animation

A simple and cute animation showing a palette of col

Fontness Exercise - D

Part of an amazing series of animated letters from Chris Gannon - an animated SVG letter 𝓓

Animation in the real world

Pixel Pioneers — pixelpioneers.co

Lovely subtle animations add polish to this conference website taking place in Bristol and Belfast this year.