CSS animations with transform: translate

Question

Please help, when I'm trying to play animation with moving ball in position X and Y at the same time it doesn't work, some strange behaviour. I would like to look like a batted and falling ball

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

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

Answer 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);
  }
}

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

It is because you weren't running the animations concurrently. Here both translations are just being run at the same time. You just had a bit more than you needed.

EDIT

Check out this blog post. It gives explanations on the kinds of curves it seems you are going for Curved Path Animations In CSS