- CSS Animation Weekly
- Posts
- CSS Animation Weekly #117
CSS Animation Weekly #117
We bring you micro nudges, animation worklets and a load of really great animated CSS inspiration today!
♥️
Donovan at CSSAnimation.rocks
Articles
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b451b85d-69df-45f4-90a4-c8d3ea838bd0/0_MyF3_8pcG3KzfvxQ.png)
An interesting approach to influencing and highlighting our UI - micro nudges! See how these small animations can enrich an app's UX
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/ccd8476d-aa89-4bce-81d1-89ba1a8ab326/social-webfu-16x9.png)
Exciting developments in the world of Houdini - Animation Worklets let you create custom UI that animated smoothly by avoiding the kinds of thread-blocking that usually results in janky animations
Featured
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/26e8e4b6-c96c-4321-bff5-46344ee9f704/rObmmDOxSYmssAWgAL3a.png)
Learn how to bring a website to life, animations, transitions, scroll effects, carousels and more in video tutorials.
Inspiration
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/aaf3f9b3-20ae-4983-bc07-89c7ab0f1403/82.wjeBpp.0d79a74b-ded2-4cee-8373-30e5bc0c0f55.png)
An amazing example of 3D transforms in the form of a rotating carousel!
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/07964883-651c-42b7-ad2a-4974deeaeecf/1595198.EdVzNL.17fc2a9c-f3f0-4931-b403-2829d90cb299.png)
A load of pure CSS animated toggles!
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a2b152b0-c543-485d-acb8-469add42d32f/936891.vVrZGZ.420ea907-38cc-4a2c-a238-81548704d2c7.png)
A very cute dancing skellington
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/eabcb24a-8e56-4139-a20d-9f9701d865e2/947795.gBKWdW.d52ef124-82ed-4681-af57-3a433963cf76.png)
Press the arrows to see the lovely transitions between each of these devices ✨
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/ebc938b9-0a8c-47fd-b768-393ab9747242/756881.ZjErdL.f87013a8-7b38-4a19-abed-7aba0c01a23c.png)
I couldn't get the colour changing to work on this one but the animation is cool 🤷♀️
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/1ac65e9d-de33-408d-a1e2-2931967d6564/476255.yEwdbB.e4f90555-a213-4336-bf19-558ee699e02f.png)
This may be just another floating menu palette but the way the ellipses animate into the close X is pretty cool!
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/2ba41183-84c2-4a81-8b0f-0144df1bdfd7/thumbnail.large.jpg)
It's great to see what can be done with CSS - these animated particles would look great as a seasonal winter effect
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/03675693-e88a-474a-aea7-e9dae3ce17d6/52982.QZBLpg.48b4991a-d186-409a-886d-65d0d6c574ef.png)
A hypnotic and beautiful tunnel animation