<div class="items">
  <div class="item">
    <div class="circle"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
  </div>
</div>

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.items {
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid red;
  border-radius: 50%;
}

.item:nth-child(1) {
  --size: 350px;
  --degress: 30deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an1 30s linear infinite;
}

.item:nth-child(2) {
  --size: 300px;
  --degress: 45deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an2 40s linear infinite;
}

.item:nth-child(3) {
  --size: 250px;
  --degress: 60deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an3 20s linear infinite;
}

.item:nth-child(4) {
  --size: 200px;
  --degress: 75deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an4 50s linear infinite;
}

.circle {
  width: 20px;
  height: 20px;
  background: blue;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -10px;
}

@keyframes an1 {
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes an2 {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes an3 {
  from {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes an4 {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}