We did it! This week we passed 8,000 subscribers! ✨ Many thanks and welcome all our new subscribers. This week we will be exploring tips for making amazing CSS animations, building some cool (creepy?) Three.js walking hands, and loads of inspiration.

♥️ Donovan at CSSAnimation.rocks

Articles

12 tips for amazing CSS animation | Creative Bloq — www.creativebloq.com

Unleash the full capabilities of interactive CSS animation.

Video: Walking hands — www.youtube.com

A live stream from Yuri Artyukh talking how to create a walking hands animation using Three.js

Featured

Level Up Your CSS Animation Skills (save 94%) — www.udemy.com

Some people have asked for a discount code for this course. While I’d be happier with people paying $199 for the 4 hour+ practical CSS animation lessons, I’d much rather people weren’t blocked from taking the course. So her we go, get 94% off with this link!

Inspiration

3D CSS Kinetic Type Poster

Another amazing poster creation from Pete Barr - this time featuring some lovely 3D CSS animation

Dave

Amazing use of shade and shadows to create this CSS-only animation 

Clipping gif to text

Celebrate the start of 2020 with this animated gif clipped to text - handy technique 

CSS Directional Motion Blur

I hadn't realise you could specify directional blur using `transform: scale`. Nice trick

Visualize easing function

A lovely way to see the shape of an easing function! Try changing the "--easing" value at the top

Social Icon Gooey Effects

Bloop blip blip I can almost hear these gooey buttons saying 

Playful button hover effects

An interesting button hover / click effect

CSS3 Checkbox

A simple implementation of a CSS (animated) checkbox ✅

That's all for this week! Have a good one everybody. Also, don't forget to share this newsletter and encourage your friends to sign up here! Much appreciated, Donovan.