10 cool and inspiring CSS animations (Oddly satisfying!)

10 cool and inspiring CSS animations (Oddly satisfying!) Thumbnail
Published on 15. September 2019Last updated on 29. April 2021

Sometimes after a long, exhausting day it is enough to look at something beautiful. Therefore “satisfying” videos or pictures are very good. You can see in this article that this is also possible with CSS and JavaScript!

Advertisement

Such satisfying animations are simply beautiful and soothing to look at. It’s ingenious when you have a deeper use, like the first example as load animation. Just let yourself be surprised what the web has to offer.

Some animations are interactive. Just hover over it and click on it with your mouse.

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

1. Oddly satisfying loading indicator (CSS only)

2. Oddly satisfying CSS Only animation

Advertisement

3. The Last Experience

4. Campfire

5. Growing pastel dots

6. Rainbow lines

7. Mesmerizing

8. Animation Test

Advertisement

9. Musical background on mousemove

10. Truchet 13

I hope the animations have calmed you down a bit or have partially fascinated and motivated you for new projects. Creative phases are important for us and we should take our time every day to switch something off.

Note: All buttons are all published on codepen.io and not by me.

Not enough? Then this could be something for you!

Related Posts
💬 Join the Conversation

2 Comments

Your email address will not be published. Required fields are marked *