@keyframes shot { 0% { transform: rotate(215deg) translate(0, 0); } 100% { transform: rotate(215deg) translate(20px, -300px); } }.sun-light { position: absolute; top: 90px; left: 330px; display: flex; width: 200px; height: 200px; background-color: pink; border-radius: 50%; transform: rotate(215deg); overflow: hidden; animation: shot 2s 5; } 如何让我的动画元素执行完动画后不返回原来位置

您可以在动画结束后添加`animation-fill-mode: forwards;`属性，这将使动画元素在动画结束后保持在最后一个关键帧的状态，而不是返回原来的位置。例如：

.sun-light {
  position: absolute;
  top: 90px;
  left: 330px;
  display: flex;
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 50%;
  transform: rotate(215deg);
  overflow: hidden;
  animation: shot 2s 5;
  animation-fill-mode: forwards;
}

这样，在动画完成后，`.sun-light`元素将保持在最后一个关键帧的位置，而不会返回原来的位置。