CSS 组合动画 - 第二个动画未按预期运行答案

【问题标题】：CSS Combining Animations - Second Animation Not Behaving As ExpectedCSS 组合动画 - 第二个动画未按预期运行
【发布时间】：2021-07-15 11:52:36
【问题描述】：

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

这是它目前的样子：

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

相关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”将对象保持在动画的结束状态。

我已经完成了所有这些，但无法弄清楚为什么旋转动画也会将对象移回左侧，而不是仅仅在原地旋转。我错过了什么吗？

【问题讨论】：

标签： css animation rotation transform keyframe

【解决方案1】：

如果你把动画rightself改成这样就可以了：

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

我认为动画无法保留状态，但我不知道为什么。

【讨论】：