DEV Community

Cover image for Mesmerizing animation using only CSS rotations 🧘‍♀️

Mesmerizing animation using only CSS rotations 🧘‍♀️

Mustapha Aouas on November 18, 2021

I created an oddly satisfying CSS animation on codepen, using only rotations. It turns out it went a little bit viral on Reddit so I decided to sha...
Collapse
 
chimichanga17 profile image
Rajesh G

Daamn
This is some really good explaining.
It's my first time understanding how CSS animations work

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you mate 🙏
Follow me on Twitter for daily (almost ^^) content like this => twitter.com/theangularguy

Collapse
 
mtrantalainen profile image
Mikko Rantalainen

Great work! One could also get less repeating patterns by rotating each circle with different speeds. The dots could be rendered off-center to create small wobble effect.

Collapse
 
cormacmaherie profile image
Cormac Maher

Very nice effect, and wonderfully simple

Collapse
 
devfranpr profile image
DevFranPR

Surely this thing is mesmerizing 😵

Collapse
 
id profile image
Lang

nice work

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you 🙏

Collapse
 
utkarshkalra profile image
utkarsh

This was so good and easy 😩💞

Collapse
 
rickhardbr profile image
RickHardBR

Rapaz, que negocio lindo de se ver, parabéns. ficou magnífico.

Collapse
 
mustapha profile image
Mustapha Aouas

Thanks 👍🏻

Collapse
 
foxy4096 profile image
Foxy4096

I can look at it for hours

Collapse
 
mustapha profile image
Mustapha Aouas

🪄

Collapse
 
princechigozie11 profile image
Prince

This is nice

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you 🙏

Collapse
 
eugenejerry profile image
Eugene N.I.

Amazing

Collapse
 
aayushgautam profile image
aayushgautam

Amazing 😍😍

Collapse
 
mustapha profile image
Mustapha Aouas

Thanks 😊 🙏

Collapse
 
fajar8252 profile image
fajar99

Amazing 😍😍

Collapse
 
mustapha profile image
Mustapha Aouas

Thanks 🙏

Collapse
 
aquibsayyed42 profile image
aquib sayyed

Dope. Thanks

Collapse
 
kosoko_daniel profile image
Oluwagbenga

Wow

Collapse
 
mustapha profile image
Mustapha Aouas

😵‍💫

Collapse
 
nascif profile image
Nascif A Abousalh Neto

Very nice! Here is another take on a yin-yang animation, using D3 transitions and attrTween.
observablehq.com/@nascif/yin-yang-...

Collapse
 
nascif profile image
Nascif A Abousalh Neto • Edited

The starting point was similar (circles within circles). But I changed sizes (radius) along with rotation angles to capture the dynamic change between the two extremes.

Collapse
 
amircahyadi profile image
Amir-cahyadi

❤️👍