DEV Community

Cover image for 10 Satisfying CSS Animations for relaxation 💆

Posted on • Updated on • Originally published at

10 Satisfying CSS Animations for relaxation 💆

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!

➡️ Update with more animations available (click)! 🚀

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.

Attention: The single pens are not from me!

1. Oddly satisfying loading indicator (CSS only)

2. Oddly satisfying CSS Only animation

3. The Last Experience

4. Campfire

5. Growing pastel dots

6. Rainbow lines

7. Mesmerizing

8. Animation Test

9. Musical background on mousemove

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. 💆

Thanks for reading! If you liked this article, please let me know and share it! If you want to you can check out my blog and follow me on twitter! 😊

Top comments (23)

chrisachard profile image
Chris Achard

These are sooo nice :) It's so cool how much just CSS can do! Awesome work 😃

jamesthomson profile image
James Thomson

Sorry to be that guy, but half of these are using JS & Canvas to do the work - have a look at the SCSS tab on them. Still some cool animations, but the title is definitely misleading.

webdeasy profile image

That's correct, I fixed the title! ☝️

kp profile image

Exactly. As cool as these are, this is all mostly JS.

Thread Thread
chrisachard profile image
Chris Achard

I guess I should've looked at the source first 🤦‍♂️

blankbash profile image

OMG!!! The Last Experience is so fun!!!

dsaw profile image
Devesh Sawant • Edited

Yeah, that one is oddly relaxing and... annoying at the same time.

conorluddy profile image

Loving the first one in particular :D

nuggit profile image
Nagisa Day

Did you make all these?? I want to hear the story behind #3!

webdeasy profile image

No, I didn't program those pens. But I like to be inspired by them! :)

romainlt profile image
Romain Lt

Excellent :D !

pandaquests profile image
Panda Quests

"The last experience" is kind of creepy. But cool samples

scottibr profile image
Guilherme Scotti

Cool love all

whillozb profile image
whilloz willy bozzie

Hell no! Didn't see that coming!! So refreshing.

gitjuned profile image
Juned Khatri


webdeasy profile image


remibruguier profile image

Ok that second one is not satisfying at all, it irritated me to not understand how it worked without checking the code behind it... Thanks for the share though, it is really interesting.

webdeasy profile image

Yeah it's crazy😂

johannesjo profile image
Johannes Millan

Great list! Thank you very much for sharing. Though I have to say: Some of them (3 & 6 especially) are not relaxing to me at all :)

webdeasy profile image

They are more satisfying than relaxing. 😂

yuanhao profile image
YuanHao Chiang • Edited

Everything was great and relaxing until the 9th one started making random sounds 🤣

Great list, I can't believe CSS can do this much O_O.

webdeasy profile image

Yeah, but also cool I think. 😂

olalani profile image
Olalani Oluwaseun

Cool stuffs
Love them