CSS Animation Weekly
Posts
CSS Animation Weekly #60 - Working with animations, Skeleton screens, and Rethinking Drag-and-drop

CSS Animation Weekly #60 - Working with animations, Skeleton screens, and Rethinking Drag-and-drop

Loads going on this week - see how you can use Firefox to better design and edit animations, how animation can help skeleton loading screens stand out, and drag-and-drop animation timing too.

♥️

Donovan at CSSAnimation.rocks

Articles

Work with animations — developer.mozilla.org

How to visualise and edit animations within Firefox! 🦊

Building Skeleton Screens with CSS Custom Properties — css-tricks.com

Skeleton screens can improve the perceived speed of your app or site, and this article sets out some strategies for creating them 💀

Rethinking drag and drop

Alex Reardon sets out how a drag-and-drop component can make use of animation to feel more natural and pleasant to use

Inspiration

Illustration brought to life — codepen.io

L🍳ovely subtle animation on this example, put together using Webflow (and without writing any code)

SpaceX Falcon 9 Rocket CSS — codepen.io

Crazy CSS animated landing of the SpaceX rocket 🚀

Only CSS: 和嵐

Tranquil autumn scene with animated leaves created using only CSS 🍁

Egg Toggle — codepen.io

Fun example of a toggle using an egg, created using Bodymovin and GreenSock 🍳