CSS Bounce Effect

HTML and CSS may be used to create a smooth bounce motion. It will produce enjoyable and desired results.

A <div> in an HTML page with the class = "ball" and a <div> of class = "container" is used in this project:

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

For programming animation, we'll go to CSS. The ball is now 80px by 80px in size and is positioned in the center of the page using Flexbox. Since the user chooses the ball's size, it is available in any size.

body {
        margin: 0px;
        padding: 0px;
        height: 100vh;

        /* To Center the Div of class = container*/
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .container {
        height: 500px;
        width: 500px;
        background-color: #f5a525;

        /* To center the ball in the div container */
        display: flex;
        align-items: center;
        justify-content: center;
      }


.ball {
        width: 80px;
        height: 80px;
        border-radius: 50%;  
        background-color: #0c4302; /* Changes the color of the circle to green. */

        animation: bounce 0.5s; /* It converts the square shaped box             into a circle */
        animation-direction: alternate;
        animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
        animation-iteration-count: infinite;
      }

Keyframe Creating - The animations can be completely customized with the help of a CSS keyframe. The name of the animation is simply used after the term @keyframes, for example, smooth bounce ball:

@keyframes smoothbounceeffect {

         	/* Statements */

}

Use the keywords 'from' and 'to' to create the animation's start and finish points within the keyframe:

@keyframes smoothbounceeffect {
        from {
         	/* Starting Value*/
        }
        to {
          /* Ending Value */
        }
}

As far as we can tell, the animation can have starting and ending values. The placement of the ball needs to be changed in order to provide a bouncing effect. Transform enables changing an element's coordinates. Thus, the last keyframe:

@keyframes smoothbounceeffect {
        from {
          transform: translate3d(0, 0, 0);
        }
        to {
          transform: translate3d(0, 200px, 0);
        }
}

The three inputs are the modification of the 3-dimensional axis (x, y, z). The ball will be translated along three-dimensional axes. A translation along the y-axis is required for the ball to go up and down.

Keyframe Running - The @keyframe needs to be executed now that it has been constructed. The following lines of code need to be added to the .ball{} code stated above:

.ball {
        animation: bounce 0.5s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
      }

The idea of the animation - The animation specifies a duration of 0.5 seconds and instructs the ball element to utilize the specified keyframe rule bounce. After that, the animation direction changes. then continues to run the animation indefinitely.

However, it does not move back and forth or up and down like a ball that bounces.

By default, animations are set to be smooth. As a result, the animation must start slowly, pick up speed in the middle, and then slow down again towards the end to give the impression that the ball is bouncing.

For that bezier curves are employed to alter animation timings. Therefore, the following code must be added:

ball {
        /* Other CSS effects */
        animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
      }

The ball then exhibits the effect of bouncing after that.

The complete Code is given below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Mata Data -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Bounce Effect</title>

    <!-- Adding CSS -->
    <style>
      body {
        margin: 0px;
        padding: 0px;
        height: 100vh;

        /* To Center the Div of class = container*/
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .container {
        height: 500px;
        width: 500px;
        background-color: #f5a525;

        /* To center the ball in the div container */
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .ball {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #0c4302;
        animation: bounce 0.5s;
        animation-direction: alternate;
        animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
        animation-iteration-count: infinite;
      }

      @keyframes bounce {
        from {
          transform: translate3d(0, 0, 0);
        }
        to {
          transform: translate3d(0, 200px, 0);
        }
      }
    </style>
  </head>

  <!-- HTML Body Starts from here-->
  <body>
    <div class="container">
      <div class="ball"></div>
    </div>
  </body>
</html>

Output:

Extreme Positions of the Ball: