- CSS Animation Weekly
- Posts
- CSS Animation Weekly #314
CSS Animation Weekly #314
This week we're exploring cool refraction in WebGL, creating better-timed animations with negative delay, and more.
❤️ Donovan at CSSAnimation.rocks
Cool stuff
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/2fffd629-564b-4c38-bacf-5cfbc2567fb2/metaImage.png)
Some amazing glass and refraction effects for the web
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/96e2ad6d-0df3-4998-ab71-3f9e9b0fa93c/social_1200x630.png)
A handy tip to make in-motion animations appear more natural
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/e4e470fe-27f0-4bc1-85ce-19d6fb44ef8f/ImageToContent_feat.jpg)
Some pretty intense scroll and transition effects in this demo from Codrops
And now a word from...
Inspiration
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a0e335bc-4817-419b-a80a-aaa5c10ca421/qBPGEQy-800.jpg)
Congrats to Chris Gannon reaching such a milestone! Cool animation too
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/3e14a3a7-8a7a-4e5b-abd6-8946e55cdf50/OBPJKK-800.jpg)
A neat way to expand info cards while shrinking the others
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/86ba8e3a-6044-4ffa-9b37-4f40d660cb4a/jOzZPJw-800.jpg)
A diagonal marquee effect that also makes use of the prefers-reduced-motion preference
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/fcb86f46-6701-420e-811a-4d452eb48a50/NOMeEb.custom.jpg)
A game made entirely with CSS