Mustapha AouasI 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!
