This week we take a step back and examine the basics of how CSS animation works, before rewarding ourselves with a burger.

♥️ Donovan at CSSAnimation.rocks

Articles

Learn CSS animation ASAP — medium.com

A nicely set out introduction to CSS animation principles

The 🍔 menu — uxdesign.cc

The humble hamburger menu. Love it or hate it, we all have to build them sometimes. Here's a step-by-step guide to creating and animating one

Inspiration

CSS Night Train Ride Animation

This elegant HTML/CSS demo uses clip path and lots of smart CSS styling to create a gorgeous result

Pure CSS cuboid jellyfish

Tweak the settings in this HTML (Pug) and CSS (SCSS) cube-style jellyfish

Wavy Circle loader from Youtube

Combining simple shapes with staggered animations is a cool way to make animation stand out and this wavy circle loader looks amazing

Custom scroll slider

This horizontal-scrolling demo has a nice pseudo-3D effect

Minecraft Dungeons Inspired Loading cube

Cool example of a 3D CSS-animated cube on this Minecraft themed loading screen

Tab Bar Interaction #3

A simple yet effective way of highlighting nav bar items on click

A sphere in an SVG path

I didn't even realise it was possible to create a 3D sphere in SVG