- CSS Animation Weekly
- Posts
- CSS Animation Weekly #100
CSS Animation Weekly #100
Welcome to issue #100! I can't believe it's been nearly two years. Let's celebrate by checking out some awesome examples of CSS animation 🎉
♥️
Donovan at CSSAnimation.rocks
P.S. While you're here - I wanted to share a newsletter a friend of mine has started... It's called Remote Jobs Club and features hand-picked and manually verified remote jobs. Check it out!
Articles
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/8de54cac-50f4-4f2e-834d-ce53ad7b3ce9/QhappnCROiSIDjbfE9uw_countdown-timer.png.jpg)
An interesting take on building a slider in this tutorial from Scotch.io.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/0d3b125b-6dd9-4395-a10d-96b7f06c2977/case-study.jpg)
Sure this isn't CSS but it's amazing and worth sharing. An exploration of motion tracking using Three.js and WebGL!
Featured
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/7a97e26c-7f4c-43f1-aa6a-7976c2cade73/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/094ed80a-6b12-4790-9f2d-03b4b5b776e8/large.png)
This pure CSS artwork of a workspace animation is stunning - would make a great web page header
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/2f1999d9-4f51-41b8-aaad-35b2f0e1f4ff/large.png)
Not only a nice animation but helpful too! See how making a gap for emergency vehicles can save lives 🚑
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/7a0ba7d8-e1bb-468a-a653-ffac7ba7ca12/large.png)
Lovely subtle movements combine on this hover effect - the text appears really nicely
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/bf0fad2c-69a8-4ae5-b05c-8fc7d5c0508f/large.png)
This button... is indeed cool, Chris!
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/d0a40290-c107-4369-93c4-275a9beb2459/large.png)
This 3D hover effect has to be seen to be believed - amazing work
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/856b74aa-0f93-434c-a80e-25872464eb70/large.png)
A nice simple dots loader with a relaxing pulse-style animation
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/89bdd108-a409-4491-bb27-0f91ee21ba12/large.png)
Is this the world's slowest CSS animation? Watch the moon rotate in REAL TIME (24 hours per rotation)
Animation in the real world
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/543dc39c-3892-4883-a1eb-a2ccc8cf74d4/default.jpg)
Check out the animations on this site showcasing the greatest jerseys worn during soccer worldcups from 1930 to today, at the occasion of 2018 FIFA Worldcup in Russia.