04 August 2024

How to animate around a circle

The other day I wanted to make a CSS animation where an object would rotate around a circle so this was the first thing I tried:

@keyframes circle {
  0%{
    transform: rotate(0deg);
  } 100% {
    transform: rotate(360deg);
  }
}

See the Pen Untitled by Robin Rendle (@robinrendle) on CodePen.

Gah! That’s not the right kind of rotation I wanted.

What I really needed was for the whole object to be locked in place and rotate around the center. So I tried again, but this time I added a translate in there:

@keyframes circle {
  0%{
    transform: rotate(0deg) translate(-10px);
  }
  100%{
    transform: rotate(360deg) translate(-10px);
  }
}

See the Pen Rotate Circle 1 by Robin Rendle (@robinrendle) on CodePen.

Okay, that’s got the position I want where the image rotates around a center – but how do I prevent that rotation of the image itself? WELL, I found kirupa’s post about animating items around a point but all those items show the same side to the center as they rotate. So sadly that didn’t help me.

After fiddling with things and playing around, and I cannot tell you how I managed to get here dear reader, but this CSS eventually worked for me:

@keyframes circle {
  0%{
    transform: rotate(0deg) translate(-10px) rotate(0deg);
  }
  100%{
    transform: rotate(360deg) translate(-10px) rotate(-360deg);
  }
}

See the Pen Rotate Circle 2 by Robin Rendle (@robinrendle) on CodePen.

That’s the precise effect I was lookin’ for!

animation