Eu só quero animar minha imagem através do caminho curvo. Assim. (Estou usando posição absoluta para posicionamento.) Pesquisei e descobri que a transformação css pode fazer o trabalho. Isso pode ser feito facilmente por linha reta. Mas caminho curvo?

Tentei combinar com css transform-origin + transform: rotate, mas não consegui exatamente o que queria. Claramente, quero mover cerca de 80% para a esquerda curvada e preciso chegar à posição original. Tentei várias vezes ajustar meu código, mas ainda não tive sorte.

Violino

P.S

O que a origem de transformação realmente faz aqui? Isso é necessário? Alguém pode me explicar sobre como o transform: rotate funciona aqui?

Aqui está o meu código

.sun{
  width: 5.7%;
  position: absolute;
  top: -5%;
  left: 57%;
  animation: circle 10s linear infinite;
  transform-origin: 0px 700px;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

@keyframes circle {
  from {
    transform:rotate(-60deg); 
  }
  to { 
    transform:rotate(40deg); 
  }
}

<div class="sun">
 <img src="sun.png" alt="">
</div>