- CSS Animation Weekly
- Posts
- CSS Animation Weekly #109 - π Clip path and loads of inspiration
CSS Animation Weekly #109 - π Clip path and loads of inspiration
Happy birthday to me today! To celebrate, we have a load of great pure-CSS animated web demos. Enjoy!
β₯οΈ
Donovan at CSSAnimation.rocks
Articles
I love how clip path is used here to create amazing image transitions!
Featured

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

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

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

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

This uses splitting.js to create a lovely hover effect

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

Hover each button to see the borders animate nicely

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

Super-smooth and simple animation
Animation in the real world

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