- CSS Animation Weekly
- Posts
- CSS Animation Weekly #202
CSS Animation Weekly #202
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
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/3c2f4c68-dd47-4b16-84a3-9e8eff32318e/0_dGf7tapmbR6O12B_.jpeg)
A nicely set out introduction to CSS animation principles
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/120749b8-be91-46f9-b6e5-8632d1fa5b5e/1_gvhLdQ8--lIgCYmXEeTVyw.png)
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
This elegant HTML/CSS demo uses clip path and lots of smart CSS styling to create a gorgeous result
Tweak the settings in this HTML (Pug) and CSS (SCSS) cube-style jellyfish
Combining simple shapes with staggered animations is a cool way to make animation stand out and this wavy circle loader looks amazing
This horizontal-scrolling demo has a nice pseudo-3D effect
Cool example of a 3D CSS-animated cube on this Minecraft themed loading screen
A simple yet effective way of highlighting nav bar items on click
I didn't even realise it was possible to create a 3D sphere in SVG