CSS Animation Weekly #206

This week we're creating some interesting hover image animation effects, revisiting our understanding of the fundamentals of transitions, and loads of great demos.

♥️ Donovan at CSSAnimation.rocks

Articles

A tutorial on how to create a hover effect for a menu where images appear with an animation on each item

A nicely written guide to getting started with CSS transitions including timing functions, delay and duration

Featured

Looking for an alternate way to search and browse Amazon? While this site is Ireland-based, it might be interesting if you want to see an example of a Svelte application that makes use of lots of subtle UI animations to provide a fast e-commerce experience. Give it a go!

(PS. I made this site myself in my spare time, I hope you like it! - Donovan)

Inspiration

An amazing 3D scroll effect made with GSAP

Using the MorphSVG plugin for GSAP to create some very pleasant little toggle effects!

A cute and subtle example of GSAP animation on an SVG bookmark, using keyframes to animate the path

A lovely pure HTML/CSS animated demo of Madeline floating with a balloon

So much character in this simple little GSAP cat skateboarder

Another awesome Swissted poster brought to life with some GSAP

I love how intensely silly this little Twitter animation is