This week we explore web performance, creating accordion components and assembling cool slide animations.

♥️

Donovan at CSSAnimation.rocks

Web Performance Mini Series: Animations — www.youtube.com

Paul Lewis explains the mechanism behind web animation in this excellent video 📺

Creating a Reusable Accordion Component That Works Anywhere

File this one under "could well be useful in a project sometime"

Slide an Image to Reveal Text with CSS Animations — css-tricks.com

A great step-by-step tutorial to create a nifty animation using CSS animations

Featured

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

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

Inspiration

Animated CSS burgers (HTML/CSS + React) — march08.github.io

A collection of animated CSS burgers for React also available as plain HTML/CSS

CSS Snow Fox — codepen.io

Lovely smooth animation on this snow fox. Hope it's not too cold where you are!

HTML5 Deck of Cards — deck-of-cards.js.org

An HTML5 animated deck of cards 🃏

Octahedron twist — codepen.io

Some mind bending maths creates this CSS-only animated octahedron

Arrow Following Mouse — codepen.io

A very interesting demo of an arrow that follows the mouse. Great springiness to it

wiv.js

If you've ever wondered if there's a library to make your DIVs wobbly, here you go!

Animation in the real world

Uncanny Valley Studio website — uncannyvalley.studio

Check out the 3D scroll zooming on this, combined with mouse tracking. Lovely stuff