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

Question

我正在尝试向单个对象添加多个 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”使对象保持在动画的结束状态。

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

Answer 1

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

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

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

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

CSS Combining Animations - Second Animation Not Behaving As Expected

css

animation

rotation

transform

keyframe