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?

Top comments (25)

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