This week we're diving into a detailed guide to CSS animations and transitions, before going even deeper into the depths of realistic water particles! Also, loads of cool demos.

♥️

Donovan at CSSAnimation.rocks

Articles

A Detailed Guide to CSS Animations and Transitions — medium.com

A great walkthrough of animations, transitions and how they work in CSS

Double density relaxation algorithm

A through walkthrough of creating realistic water particle effects

WebGL deconstruction

A deconstruction of the marvelous Tao Tajima website. A great example of scroll-triggered animations that don't get in the way of scrolling

Featured

Level Up your CSS animation skills — courses.cssanimation.rocks

Learn how to bring a website to life, animations, transitions, scroll effects, carousels and more in video tutorials.

Inspiration

Liquify your SVGs — codepen.io

A lovely liquid-animation effect using GSAP and SVG

Egg Head In Love — codepen.io

An egg and a ghost fall in love. Cute CSS-only animation!

Gooey SVG Loading Spinner — codepen.io

Very slick gooey loader

Engine — codepen.io

Cool visualisation of an engine (with variable numbers of valves) using Vue.js!

GreenSock - Each Loop with tweens — codepen.io

A neat GSAP demo showing how looped animations can work

Animation in the real world

Stripe Issuing: Introducing an API for creating physical and virtual cards — stripe.com

Gorgeous animation here from Stripe as ever - checkout how the 3D card even turns into a code demo as you scroll 👌