CSS组合动画-第二个动画表现不符合预期

Question

我试图添加多个CSS关键帧动画到一个单一的对象。我有一个火箭的图像，我想要在屏幕上移动，然后旋转到右边。第一部分，向右移动，工作正常。第二部分，旋转，似乎在工作，但它不是在原地旋转，而是在向左移动的同时旋转。

下面是它现在的样子：

https://codeeverydamnday.com/projects/rocketblaster/index2.html

相关HTML：

<img id="rocketfire" src="images/rocketfireright.svg" />

相关CSS：

#rocketfire {
  position: absolute;
  top: 200px;
  left: -320px;
  height: 200px;
  animation: 
    launch 4s ease-in-out 0.5s 1 forwards,
    rightself 2s ease-in-out 4.5s 1 forwards;
}

@keyframes launch {
  0% {transform: translateX(-320px);}
  100% {transform: translateX(1050px);}
}

@keyframes rightself {
  100% {transform: rotate(-90deg);}
}

我看过的每个教程都说过同样的事情--只是用逗号分隔动画，然后添加你想要的属性，确保添加一个延迟，这样第二个动画在第一个动画之后才会开始。使用"forwards“将对象保持在动画的结束状态。

我已经做了所有这些，但我不明白为什么旋转动画也将对象移回左侧，而不是只是在原地旋转。我是不是遗漏了什么？

Answer 1

如果将动画rightself更改为以下内容，则会起作用：

@keyframes rightself {
  100% {
    transform: translateX(1050px) rotate(-90deg);
  }
}

我认为动画不能保持状态，但我不知道为什么。