CSS - 弯曲路径中的动画对象

我只想通过弯曲的路径为我的图像制作动画。像这样。 （我使用绝对位置进行定位。）做了一些研究，发现 css 转换可以完成这项工作。可以通过直线轻松完成。但弯曲的路径？

我尝试与 csstransform-origin+transform:rotate 结合使用，但我没有得到我想要的确切结果。显然，我想向左弯曲移动 80% 左右，并且需要回到原始位置。我尝试了很多次调整我的代码，但仍然没有成功。

Fiddle

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>

也许使父元素通过旋转移动，而子元素（在我的例子中是伪元素，无论如何）使位置绝对于父元素。并且只使用动画。看看我的解决方案。也许你必须创建一些包装并使用overflow: hidden，因为它是旋转的正方形。您可以通过添加来观察方块的行为background-color.

@keyframes move-sun {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(90deg);
  }
}

.sun {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 200px;
  transform: rotate(90deg);
  animation: move-sun 10s;
}

.sun::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -25px;
  width: 50px;
  height: 50px;
  background-color: #ff0;
  border-radius: 50%;
}

<div class="sun">

</div>