DEV Community

Cover image for Mesmerizing animation using only CSS rotations πŸ§˜β€β™€οΈ
Mustapha Aouas
Mustapha Aouas

Posted on • Updated on

Mesmerizing animation using only CSS rotations πŸ§˜β€β™€οΈ

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 share how I did it here :)

Step 1

Let's skip the intro that no one ever read and jump right into it. The first step is to create a yin yang using CSS.
Because a picture is worth a thousand words, take a look at the illustration below:
animation 1

We have the main circle which is a div and the two small circles are the ::before and ::after pseudo-elements of the div. The three elements have a border-radius of 50% to be circles.

The main div has a background-image set to this linear-gradient: (to left, #fff, #fff 50%, #000 50%, #000). With this, the div should be half white half black.

For the two other circles, they have a big border-width, and their border-color is the opposite of their background color (eg. white circle with black border). That way we don't need too many html elements and it's easier to place them in the center (one on top of the other).

With this, it could be a good exercise to try to do the rest of the animation on your own. You can come back here to compare the implementations ;)

Step 2

Next, we need a container div (also half black half white) and another yin yang (the two should be placed one on top of the other). Have a look:
animation 2

Step 3

At this point we are almost done, all we have to do is to animate the yin yangs in the opposite direction of the container div. For that we can use the animation-direction CSS property and set it to reverse.

The CSS animation looks like this:

@keyframes roll {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(-360deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

animation 3

Here is the final code:



That's it for this post. I hope you liked it. If you did, please share it with your friends & colleagues and follow me on Twitter at @theAngularGuy where I tweet about web development and computer science.

Have a nice day!


What to read next?

Discussion (26)

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
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 Author

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

Collapse
rickhardbr profile image
RickHardBR

Rapaz, que negocio lindo de se ver, parabΓ©ns. ficou magnΓ­fico.

Collapse
mustapha profile image
Mustapha Aouas Author

Thanks πŸ‘πŸ»

Collapse
devfranpr profile image
DevFranPR

Surely this thing is mesmerizing 😡

Collapse
id profile image
Lang

nice work

Collapse
mustapha profile image
Mustapha Aouas Author

Thank you πŸ™

Collapse
utkarshkalra profile image
utkarsh

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

Collapse
foxy4096 profile image
Aditya Priyadarshi

I can look at it for hours

Collapse
mustapha profile image
Mustapha Aouas Author

πŸͺ„

Collapse
princechigozie11 profile image
Princechigozie11

This is nice

Collapse
mustapha profile image
Mustapha Aouas Author

Thank you πŸ™

Collapse
eugenejerry profile image
Eugene N.I.

Amazing

Collapse
aayushgautam profile image
aayushgautam

Amazing 😍😍

Collapse
mustapha profile image
Mustapha Aouas Author

Thanks 😊 πŸ™

Collapse
fajar8252 profile image
fajar99

Amazing 😍😍

Collapse
mustapha profile image
Mustapha Aouas Author

Thanks πŸ™

Collapse
aquibsayyed42 profile image
aquib sayyed

Dope. Thanks

Collapse
kosoko_daniel profile image
Daniel

Wow

Collapse
mustapha profile image
Mustapha Aouas Author

πŸ˜΅β€πŸ’«

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 on

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

β€οΈπŸ‘