сто хочу оживить свое изображение по изогнутой дорожке. Вот так. (Я использую абсолютное положение для позиционирования.) Провел некоторое исследование и обнаружил, что преобразование CSS может сделать эту работу. Это можно легко сделать по прямой. Но изогнутый путь?

Я попытался скомбинировать css с transform-origin + transform: rotate, но я не получил именно то, что хотел. Очевидно, я хочу переместиться на 80% влево и изогнуться, и мне нужно вернуться в исходное положение. Я столько раз пытался изменить свой код, но все равно не повезло.

скрипка

P.S

Что такое transform-origin действительно здесь? Это необходимо? Может кто-нибудь объяснить мне, как работает transform: rotate?

Вот мой код

.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>