<div class="container">
  <div class="rotate-animation"></div></div>

.rotate-animation {
  width: 10px;
  height: 10px;
  
  border-radius:50%;
  transform-origin:50px 50px;
  animation: rotate 4s infinite;
}
.container{
  margin:100px auto;
  width: 100px;
  height: 100px;
  border-radius:50%;
  border:1px black solid;
  border-right:none;
  border-top:none;
  background-image:url("https://w7.pngwing.com/pngs/21/913/png-transparent-manhattan-cities-skylines-drawing-city-city-sketch-city-skyscraper-skyline-thumbnail.png");
  background-size:cover;
}

@keyframes rotate {
  0% {
    background-color: yellow;
    transform: rotate(150deg);
  }
  50% {
    background-color: blue;
    transform: rotate(420deg);
  }
  100%{
    background-color: yellow;
    transform: rotate(150deg);
  }
}