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

Using CSS Clip Path to Create Interactive Effects, PartΒ II

css-tricks.com

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

Featured

Robmmdoxsymssawgal3a?1535360262

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

Large

Draught beerβ€Šβ€”β€Šcodepen.io

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

Large

SVG animation with slidersβ€Šβ€”β€Šcodepen.io

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

Large

Pure CSS The Carlton danceβ€Šβ€”β€Šcodepen.io

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

Large

text animation with splittingβ€Šβ€”β€Šcodepen.io

This uses splitting.js to create a lovely hover effect

Large

Parallax backgroundβ€Šβ€”β€Šcodepen.io

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

Large

Three variations on one hover effectβ€Šβ€”β€Šcodepen.io

Hover each button to see the borders animate nicely

Large

Vue.js London!β€Šβ€”β€Šcodepen.io

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

Large

CSS Double Helix #07β€Šβ€”β€Šcodepen.io

Super-smooth and simple animation

Animation in the realΒ world

5erue facebook

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!