This week we're learning how CSS variables can be used to create some amazing hover effects, and creating animated fragment slideshows!

♥️

Donovan at CSSAnimation.rocks

Articles

Stunning hover effects with CSS variables

Track the position of the mouse to build awesome, interactive hover effects with just 9 lines of code and two CSS variables

Animated Fragment Slideshow — tympanus.net

A tutorial on how to create an experimental slideshow that animates in fragments. The slider is powered by the "Pieces" library

Featured

Level Up your CSS animation skills for just $19 — courses.cssanimation.rocks

As the course gets closer to complete, the price will be going up. Get it now for just $19 💃🏽

Inspiration

Animated SVG Avatar — codepen.io

Loads of subtle animation in this avatar as you enter your email and password ☃️

Paper Boat CSS Animation

Tap the boat to see it animate ⛵️

Animation Border — codepen.io

Handy examples of animated input borders

Animation Experiment - Ripple

The use of shadows and animated background colours makes this demo hypnotic 😵

Building — codepen.io

A pure CSS animated building at night 🏢

Circular Logic Works Because... — codepen.io

Some crazy 3D CSS transitioning!

What's in the Gift? — codepen.io

Nothing like a nice bit of Se7en reference with some Bodymovin' animation 🐈

Radial Progress Chart - Week Activity — codepen.io

Lovely use of D3 to create an animated Apple Watch-like health activity graph

Tabs switch animations — codepen.io

This tab changing animation is super-slick