CSS Bounce Effect

HTML and CSS can be employed to achieve a fluid bouncing animation, resulting in a pleasant and expected outcome.

A <div> element in an HTML document with the class = "ball" and a <div> element with class = "container" is incorporated in this assignment:

Example


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

For coding animations, we will utilize CSS. The spherical object now has dimensions of 80px by 80px and is centrally aligned on the webpage through Flexbox. As the user can specify the dimensions of the sphere, it can be adjusted to any desired size.

Example


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

Customizing animations is made possible through CSS keyframes, enabling full flexibility in defining animation sequences. Simply specify the animation name following the @keyframes declaration, like "smooth bounce ball":

Example


@keyframes smoothbounceeffect {

         	/* Statements */

}

Utilize the keywords 'from' and 'to' to define the initial and final positions of the animation within the keyframe:

Example


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

As per our observations, animations can involve initial and final values. Adjusting the position of the ball is essential to achieve a bouncing animation. The Transform property allows for modifying an element's position. Consequently, the final keyframe:

Example


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

The trio of inputs involve altering the 3D axis (x, y, z). The sphere will undergo translation across the three-dimensional axes. A vertical translation along the y-axis is essential for the sphere to move upwards or downwards.

Running Keyframes - It is essential to trigger the @keyframe once it has been defined. The below code snippets should be incorporated into the existing .ball{} CSS code:

Example


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

The concept behind the animation involves setting a duration of 0.5 seconds and directing the ball element to apply the defined keyframe rule "bounce." Subsequently, the animation's direction shifts and proceeds to loop continuously.

Nonetheless, it does not oscillate horizontally or vertically similar to a bouncing ball.

By default, animations are typically configured for a smooth effect. This means that the animation initiates with a gradual start, accelerates in the middle phase, and decelerates towards the end. This creates the illusion of a bouncing ball.

To adjust animation timings, bezier curves are utilized. As a result, the code below needs to be included:

Example


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

The ball subsequently demonstrates the behavior of rebounding.

The complete Code is given below:

Example


<!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:

The complete Code is given below:

Input Required