This week we're looking into some cool CSS-based approaches to underline animation and animated gifs, along with lots of brain-melting demos!

♥️ Donovan at CSSAnimation.rocks

Articles

A CSS-only, animated, wrapping underline — nickymeuleman.netlify.app

A clever approach to created animated underlines including multiple lines

A CSS only “click to animate gif” solution

A useful approach to control auto-playing animated Gif animations

Featured

Shop Ireland — www.shopireland.ie

Many thanks to everyone who offered feedback on my shopping website experiment, I'll continue improving it :) - Donovan

Inspiration

Slidey Nav

A great example of a pill-style sliding nav menu

React Accordion Menu Component

A simple and elegant little expanding accordion menu (React) component

Projection

Wow, this is a mind-melting subtle 3D cube effect

Foot-step illusion demo

Drag the bar slowly across the stripes to see the illusion here

Album Mode

3 shades of album represented here

Button!

A simple but useful demo of animating between button hover and focus states

3D Radio

Hit the play button to see this radio do it's thing

Animation in the real world

Handy CSS properties for easing functions · GitHub — gist.github.com

A useful starting point if you're looking for easing functions for your animations! See this tweet for more context