Aug 27, 2018

CSS Animation Weekly #109 - 🎂 Clip path and loads of inspiration

By CSSAnimation.rocks • Issue #109 • View online

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!

css-tricks.com • Share

Featured

Level Up your CSS animation skills | CSS Animation

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 🎉

courses.cssanimation.rocks • Share

Inspiration

Draught beer

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

codepen.io • Share

SVG animation with sliders

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

codepen.io • Share

Pure CSS The Carlton dance

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

codepen.io • Share

text animation with splitting

This uses splitting.js to create a lovely hover effect

codepen.io • Share

Parallax background

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

codepen.io • Share

Three variations on one hover effect

Hover each button to see the borders animate nicely

codepen.io • Share

Vue.js London!

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

codepen.io • Share

CSS Double Helix #07

Super-smooth and simple animation

codepen.io • Share

Animation in the real world

5e Rue - Cabinet de conseil en stratégie digitale

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

www.5erue.com • Share

Did you enjoy this issue?

By CSSAnimation.rocks

CSS Animation Weekly is a roundup of all the latest CSS animation articles and inspiration. Subscribe now and never miss an issue.

Tweet

Share

If you don't want these updates anymore, please unsubscribe here.

If you were forwarded this newsletter and you like it, you can subscribe here.