CSS animations with transform: translate

user_12422151 0
Viewed 649

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>

css-animations css-transforms css
1 Answers

.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

user_109150180
Related