Animate a circle around the circumference of another big circle

Question

I want to move a small circle around the circumference of the big circle using only CSS.

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

#small {
  animation: moveAround 2s infinite linear;
}

user_1869660 · Answer

You must specify which coordinate the circle should rotate around. By default, this is coordinate 0,0, but you want it to orbit the center of the large circle.

In CSS, you do this with transform-origin:

#small {
    transform-origin: 60px 50px;
    animation: moveAround 2s infinite linear;
}
@keyframes moveAround {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

user_8620333 · Answer

A CSS only solution with no SVG

.box {
  width: 60px;
  height: 60px;
  border: 20px solid #2493AB;
  border-radius: 50%;
  position: relative;
}

.box::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #EF6868;
  animation: moveAround 3s linear infinite;
}

@keyframes moveAround {
  from {
    transform: rotate(0deg) translate(40px);
  }
  to {
    transform: rotate(360deg) translate(40px);
  }
}

user_7394871 · Answer

Pure SMIL SVG solution

To rotate the ball, use animateTransform

Ball rotation with pauses between full revolutions

Back and forth rotation

user_10698741 · Answer

Another idea with single div.

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(#EF6868 0 9.5px, transparent 10.5px) 50% 0% / 20px 20px no-repeat, 
              radial-gradient(transparent 29px, #2493AB 30px 50px) 0 0 / 100% 100% no-repeat;
  animation: animate 3s linear infinite;
}


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

Animate a circle around the circumference of another big circle

4 Answers