CSS用transform:translate做XY轴同时动画失效，期望实现击球下落效果

• 你定义的两个@keyframes都在修改transform属性，CSS动画规则中，多个动画同时修改同一个属性时，后声明的动画会覆盖前者的属性值，因此你的X轴平移动画实际没有生效，只有Y轴动画在运行。
• 你没有为X轴动画设置匹配的缓动函数，默认的ease缓动不符合球类被击打后水平方向先快后慢的自然运动效果。

方案1：保留transform实现（性能更优，走GPU加速） #

直接把两个方向的平移合并到同一个transform规则里，不需要拆分两个动画：

.ball {
  position: absolute;
  left: 18%;
  bottom: 100px;
  width: 40px;
  height: 40px;
  background-color: cadetblue;
  border-radius: 50%;
  animation: fly-ball 2s cubic-bezier(0.17, 0.67, 0.6, 1);
}

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

<div class="ball"></div>

方案2：完全匹配参考效果，用定位属性实现 #

直接修改left和bottom属性，和参考代码逻辑完全对齐：

.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;
}

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

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

<div class="ball"></div>

内容的提问来源于stack exchange，提问作者Radek