This week we're learning how to combine subtle keyframe animations in a cute scroll cue effect, fading siblings, rotational overlay transitions and leaving a fun mouse trail!

♥️

Donovan at CSSAnimation.rocks

Articles

Create an animated scroll cue — cssanimation.rocks

The humble scroll cue is an oft-overlooked element of a page. Here we use it as an excuse to learn how to apply multiple keyframe animations and give it some love with a heartbeat ♥️

Fading out siblings on hover in CSS — www.trysmudford.com

A cool trick to fade-out siblings on hover! Siblings eh

How to Create and Animate Rotated Overlays — tympanus.net

Interesting approach to creating rotating page transitions, with great easing effects

Mouse Trail — noahyamamoto.com

A canvas-based mouse trail! Build your very own fruit ninja game with this tutorial

Featured

Level Up Your CSS Animation Skills | Udemy — www.udemy.com

I get it - it's hard to justify $140+ for a single course sometimes. Here's my way of thanking you then - use the special discount code "WEEKLY" (or click this link) to save a massive 92% today, and add CSS animation to your tool belt!

Inspiration

Direction aware hover

Hover each of the links to see the underline move right or left depending on the direction you chose. Neat!

Solar CSSystem

A gorgeous, educational animated depiction of each of our solar system's planets

Inspiring examples of CSS Animation — medium.muz.li

Never be short of interesting animation ideas with this list from Muzli

Animation in the real world

Design & VFX

Great combinations of video and page transitions throughout this site ✨

That's all for this week! Don't forget to get onto the special 92% discount over on Udemy for Level Up Your CSS Animation Skills!