Html Question posted in
Some basic documentation can be found here.

Html – Two ball bouncing animations not working when combined

* {
  padding: 0;
  margin: 0;
}

.ground {
  display: flex;
  height: 500px;
  width: 700px;
  background-color: darkkhaki;
  margin: auto;
  margin-top: 70px;
}

.ball {
  align-self: flex-end;
  height: 50px;
  width: 50px;
  background-color: brown;
  border-radius: 50%;
  /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  animation: bounce 1s cubic-bezier(0, 0, 0, 0.95) 1s infinite alternate forwards;
  -webkit-animation: bounce 1s cubic-bezier(0, 0, 0, 0.95) 1s infinite alternate forwards;
  animation: translation 5s ease-out 1s 1 normal forwards;
  -webkit-animation: translation 5s ease-out 1s 1 normal forwards;
}

@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-400px);
  }
}

@-webkit-keyframes bounce {
  from {
    -webkit-transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(-400px);
  }
}

@keyframes translation {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(650px);
  }
}

@-webkit-keyframes translation {
  from {
    -webkit-transform: translateX(0px);
  }
  to {
    -webkit-transform: translateX(650px);
  }
}
<div class="ground">
  <div class="ball"></div>
</div>

In this code I am trying to combine two different animations to make a single animation of a ball bouncing with translation, but the animations are not playing simultaneously, instead the one which is assigned later in the code is played.

I have tried separating each animation property as such:

    animation-name: bounce, translation;
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(0, 0, 0, 0.95), ease-out;
    animation-delay: 1s;
    animation-iteration-count: infinite, 1;
    animation-direction: alternate, normal;
    animation-fill-mode: forwards;

but it still doesnt work, in this case i have mentioned translation animation after the bounce animation so only translation animation is playing.

Please help me out on this, as I want to play both animations simultaneously so it looks like the ball is bouncing and moving in a direction.

Tags:

3

Answers


  1. 0

    To achieve the effect of a ball bouncing and moving horizontally at the same time, you need to combine both the bounce and translation animations correctly. The issue in your original code is that you are defining two separate animation properties for .ball, and the latter one is overriding the former. To combine these animations, you need to list them together in the animation shorthand property or define each animation property separately for both animations.

    Here’s how you can modify your CSS to achieve the desired effect:

    * {
  padding: 0;
  margin: 0;
}

.ground {
  display: flex;
  height: 500px;
  width: 700px;
  background-color: darkkhaki;
  margin: auto;
  margin-top: 70px;
}

.ball {
  align-self: flex-end;
  height: 50px;
  width: 50px;
  background-color: brown;
  border-radius: 50%;
  
  /* Combining both animations */
  animation: bounce 1s cubic-bezier(0, 0, 0, 0.95) 1s infinite alternate,
             translation 5s ease-out 1s 1 normal forwards;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-400px);
  }
}

@keyframes translation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(650px);
  }
}

    Key Points:

    • Combining Animations: The animation property for .ball now lists both
      bounce and translation animations. Each animation is defined with its
      own duration, timing function, delay, iteration count, direction, and
      fill mode.
    • Keyframes Adjustments: Make sure that your keyframes are properly set
      up for both animations. Here, they are defined from 0% to 100%.
    • Transform Property: When combining animations that both use
      transform, you need to ensure they don’t conflict. In this case,
      since one is translating in the X direction and the other in the Y
      direction, they can be combined without issues.

    By setting up your CSS in this way, both animations should run simultaneously, creating the effect of a ball bouncing and moving horizontally at the same time.

    Login or Signup to reply.
  2. 0

    The problem is that the two @keyframe apply the transform property, so only one can ever apply.

    You could consider having two elements where each @keyframe is applied individually:

    * {
  padding: 0;
  margin: 0;
}

.ground {
  display: flex;
  height: 500px;
  width: 700px;
  background-color: darkkhaki;
  margin: auto;
  margin-top: 70px;
}

.ball {
  align-self: flex-end;
  height: 50px;
  width: 50px;
  background-color: brown;
  border-radius: 50%;
  /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  animation: bounce 1s cubic-bezier(0, 0, 0, 0.95) 1s infinite alternate forwards;
  -webkit-animation: bounce 1s cubic-bezier(0, 0, 0, 0.95) 1s infinite alternate forwards;
}

.ball-translation {
  animation: translation 5s ease-out 1s 1 normal forwards;
  -webkit-animation: translation 5s ease-out 1s 1 normal forwards;
}

@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-400px);
  }
}

@-webkit-keyframes bounce {
  from {
    -webkit-transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(-400px);
  }
}

@keyframes translation {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(650px);
  }
}

@-webkit-keyframes translation {
  from {
    -webkit-transform: translateX(0px);
  }
  to {
    -webkit-transform: translateX(650px);
  }
}
    <div class="ground">
  <div class="ball-translation">
    <div class="ball"></div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    The previous answers correctly identify the problems with your code (combining animations into one animation property and the inability to assign the transform property twice), but to avoid adding an extra element, you can try using the left property for your translation animation instead of transform:

    <style type="text/css">
* {
  padding: 0;
  margin: 0;
}

.ground {
  display: flex;
  height: 500px;
  width: 700px;
  background-color: darkkhaki;
  margin: auto;
  margin-top: 70px;
}

.ball {
  position: absolute;
  align-self: flex-end;
  height: 50px;
  width: 50px;
  background-color: brown;
  border-radius: 50%;
  
  /* Combining both animations */
  animation: bounce 1s cubic-bezier(0, 0, 0, 0.95) 1s infinite alternate,
             translation 5s ease-out 1s 1 normal forwards;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-400px);
  }
}

@keyframes translation {
  0% {
    left: 0;
  }
  100% {
    left: 650px;
  }
}

</style>

<<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
<div class="ground">
  <div class="ball"></div>
</div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search