- CSS Animation Weekly
- Posts
- CSS Animation Weekly - Issue #304
CSS Animation Weekly - Issue #304
A huge week of learning, tools and inspiration!
❤️ Donovan at CSSAnimation.rocks
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/4b3efce4-f7ee-4e87-8070-9b13fd74d0da/365946.jpeg)
Using CSS variables and calc to manage background clipping, 3D, masks and more
Animation tools
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/837b4130-923d-4a31-9b7b-c282d5ccba4a/auto-animate-og.png)
A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app!
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/634df129-2db5-44d1-aab8-850d6ef02725/animate-css-grid.png)
Painless transitions for CSS Grid. A handy tool for animating grid items
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/9e7d035e-bdd5-40bc-a1be-e3a8a8373e73/twitter-header.png)
Copy-paste-able CSS animations for web projects
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/d6a71c32-cd64-4cc5-a1c6-c3adc4dba33a/og.jpg)
This looks fun! Create something cool using Three.js and enter to win $300. I look forward to seeing the results
Tween any CSS values on any DOM element in relation with its position into the viewport
Inspiration
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/e4062e08-2166-4d11-aa95-9b300ea15d1b/oNEypEP-800.jpg)
An unusual pure CSS accordion proof-of-concept
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/40dca170-c1fc-4172-884e-1f022dbf1c99/eYVjJeg-800.jpg)
Lovely animation on this lock screen demo