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:
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:
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);
}
}
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!
Top comments (25)
Daamn
This is some really good explaining.
It's my first time understanding how CSS animations work
Thank you mate π
Follow me on Twitter for daily (almost ^^) content like this => twitter.com/theangularguy
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.
Very nice effect, and wonderfully simple
Surely this thing is mesmerizing π΅
nice work
Thank you π
This was so good and easy π©π
Rapaz, que negocio lindo de se ver, parabΓ©ns. ficou magnΓfico.
Thanks ππ»
I can look at it for hours
πͺ
This is nice
Thank you π
Amazing