带有变换的 CSS 动画：翻译答案

【问题标题】：CSS animations with transform: translate带有变换的 CSS 动画：翻译
【发布时间】：2021-12-15 09:26:10
【问题描述】：

请帮忙，当我试图同时在 X 和 Y 位置移动球播放动画时，它不起作用，一些奇怪的行为。我想看起来像一个被击打和落下的球

.ball {
  position: absolute;
  left: 18%;
  bottom: 100px;

  width: 40px;
  height: 40px;
  background-color: cadetblue;
  border-radius: 50%;

  animation: fly-ball-x 2s, fly-ball-y 2s;
}

@keyframes fly-ball-x {
100% {
  transform: translateX(300px);
  }
}

@keyframes fly-ball-y {
100% {
  transform: translateY(100px);
  }
}
<div class="ball"></div>

**The result I'm expecting is like the code below:**

@keyframes fly-ball-x {
100% {
  left: 300px;
 }
}

@keyframes fly-ball-y {
100% {
  bottom: 0;
 }
}

.ball {
  position: absolute;
  left: 18%;
  bottom: 100px;

  width: 40px;
  height: 40px;
  background-color: cadetblue;
  border-radius: 50%;

  animation: fly-ball-x 2s cubic-bezier(0.17, 0.67, 0.6, 1), fly- 
  ball-y 2s;
}

&lt;div class="ball"&gt;&lt;/div&gt;

【问题讨论】：

预期结果是什么？
预期结果是球在 X 和 Y 位置同时移动，使用 transform translate x, y
这里的问题是fly-ball-y“重置”了 X 值，因为它没有 translateX 值。除了使用单个动画之外，我看不到该怎么做，这显然不是您想要做的。

标签： css css-animations css-transforms

【解决方案1】：

.ball {
  position: absolute;
  left: 18%;
  bottom: 100px;

  width: 40px;
  height: 40px;
  background-color: cadetblue;
  border-radius: 50%;

  animation: fly-ball 2s
}

@keyframes fly-ball {
100% {
  transform: translateX(300px) translateY(100px);
  }
}

&lt;div class="ball"&gt;&lt;/div&gt;

这是因为您没有同时运行动画。在这里，两个翻译只是同时运行。你只是比你需要的多一点。

编辑

查看这篇博文。它解释了您似乎要使用的曲线类型Curved Path Animations In CSS

【讨论】：

查看我编辑的帖子。我希望这将有助于更好地理解我的意思。 Left 和 Bottom 的示例有效，但我知道对于动画我们应该使用 transform
@Radek 看看我的编辑，看看它是否对你有帮助