<div class="container">
  <div class="circle"></div>
</div>

* {
  margin: 0;
  padding: 0;
}

.container {
  margin: 25px auto;
  width: 300px;
  height: 300px;
  border: 2px solid #111111;
  border-radius: 50%;
  position: relative;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: red;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  transform: translate(-50%, -50%);
  animation: myOrbit 4s linear infinite;
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}