This week we learn how CSS custom properties can make complex CSS animations easier to read, and optimise our performance using Firefox's animation tools.

♥️

Donovan at CSSAnimation.rocks

Articles

Animating Single Div Art — css-tricks.com

Learn how to bring animation to single div artwork, making extensive use of CSS custom properties.

Check CSS Animation Performance with the Browser's Dev Tools — www.sitepoint.com

Explore Firefox's animation tools to optimise your animation performance.

Inspiration

Single Div Animation — codepen.io

Nice example of a single-div image animated using CSS and GSAP ⏺

Pyramids (Square Base) — codepen.io

Lovely animation and CSS here, using Clip Path and 3D Transformations to make spinning pyramids ⚠️

flame-view-1.0.0 — codepen.io

Virtual flames! A little more work and this could be a great virtual fireplace for the living room 🔥

mandatory upgrade — codepen.io

Move up, down, left and right to explore this scene

Css waves — codepen.io

A nice simple effect, waves created using CSS

Fingerprint Hover — codepen.io

Nice shading and gradients on this hover effect 👌