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
 
cormacmaherie profile image
Cormac Maher

Very nice effect, and wonderfully simple

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
 
eugenejerry profile image
Eugene N.I.

Amazing

Collapse
 
id profile image
Lang

nice work

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you πŸ™

Collapse
 
aayushgautam profile image
aayushgautam

Amazing 😍😍

Collapse
 
mustapha profile image
Mustapha Aouas

Thanks 😊 πŸ™

Collapse
 
aquibsayyed42 profile image
aquib sayyed

Dope. Thanks

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
 
utkarshkalra profile image
utkarsh

This was so good and easy πŸ˜©πŸ’ž

Collapse
 
fajar8252 profile image
fajar99

Amazing 😍😍

Collapse
 
mustapha profile image
Mustapha Aouas

Thanks πŸ™

Collapse
 
foxy4096 profile image
Adzy

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
 
devfranpr profile image
DevFranPR

Surely this thing is mesmerizing 😡

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

β€οΈπŸ‘