Happy birthday to me today! To celebrate, we have a load of great pure-CSS animated web demos. Enjoy!

♥️

Donovan at CSSAnimation.rocks

Articles

Using CSS Clip Path to Create Interactive Effects, Part II

I love how clip path is used here to create amazing image transitions!

Featured

Level Up your CSS animation skills | CSS Animation — courses.cssanimation.rocks

Learn how to bring a website to life, animations, transitions, scroll effects, carousels and more in video tutorials. Get the course at the pre-launch price before the price goes up 🎉

Inspiration

Draught beer — codepen.io

Today being my birthday, here's a CSS-only infinite pint pouring device 🍻

SVG animation with sliders — codepen.io

Beautiful SVG animation which can be controlled by sliders. Gorgeous work!

Pure CSS The Carlton dance — codepen.io

The Carlton dance created using the CSS steps() keyframe animation timing function

text animation with splitting — codepen.io

This uses splitting.js to create a lovely hover effect

Parallax background — codepen.io

Hover your mouse around this to see a nice parallax-style movement

Three variations on one hover effect — codepen.io

Hover each button to see the borders animate nicely

Vue.js London! — codepen.io

Some beautiful choreography on this animation created for Vue.js London

CSS Double Helix #07 — codepen.io

Super-smooth and simple animation

Animation in the real world

5e Rue - Cabinet de conseil en stratégie digitale — www.5erue.com

Beautiful french agency 5e Rue has produced an amazing website full of scroll and hover effects. Explore and be inspired!