Circle rotate animation CSS

Something unique happened the other day. I got a message on my Fiverr to implement a Vue Component where I had to move a few elements round and round in a circular motion.

Learn more about me and my travels. And learn how to set up a blog for earning with bluehost.

Like the one shown below

move-element-in-circle-css
move-element-in-circle-css

With the power of new CSS3, we can make circle rotate animation CSS using animations. So let’s begin.

First of all, let’s set up our HTML that we want to use. For starters, I’ll just have two divs. One for the outer area and one for the actual smiley face inside.

<div>
   <div>☻</div>
</div>

Now coming to the actual science of it. So we know we can rotate any element using the transform: rotate() function. And if we rotate our outer circle it will rotate but the smiley face will not stay at one place like shown above. So we will have to rotate the smiley face at the same time as well so it stays on its own position “upwards” all the time and rotate around a center point as well. So in our CSS. Let’s create our rotate animations.

@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}

So the outer circle rotates clockwise and the inner circle rotates anti-clockwise. Now, let’s apply these animations to our divs for an infinite time. Also, give some width and height to the divs to make it look a bit nicer.

@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}

body > div {
    width:100px;
    height:100px;
    margin: 20px auto 0;
    color:orange;
    font-size:100px;
    line-height:1;
    animation: circle 5s linear infinite;
    transform-origin:50% 200px;
}

div > div {
    animation: inner-circle 5s linear infinite;
}

Need code pen on circle rotate animation CSS? Here you go.

Thanks for reading my tutorial on how you can make an element go in circular path for infinite time using CSS animation.

Read more about working online and becoming a digital nomad here.

Pin It on Pinterest