How to bounce a ball with CSS

It is one of the various animated projects that have been made by the web4college. It involves the following steps:

• How to make a ball?

• How to bounce a ball?

How to make a ball?

We use the <div> element and define a class named '.ball'. We define width, height and background-color properties.

Make sure that height and width are of equal length i.e. a square shape.

We define the width and height as 100px and background-color as green.

<style>
.ball{
  width:100px;
  height:100px;
  background-color:green;
  border-radius:50%;
}
</style>
Try </>

Define the border-radius as 50% to make a circle.

How to bounce a ball?

Now, we define the position property as absolute to move the ball relative to the container ( here the page is container ).

The final destination of the ball is on the right-bottom side. So specify the right property as 0% and bottom property as 0%.

<style>
.ball{
  position:absolute;
  right:0%;
  bottom:0%;
}
</style>
Try </>

Write a word in the ball (in the <div> element) and define the text-align property as center. Define the color of the text as rgb(255,255,255);.

<style>
.ball{
 color:rgb(255,255,255);
 text-align:center;
}
</style>
Try </>

The next step is very important. Make a keyframe rule that bounces the ball vertically and horizontally.

keyframe rule

Use the @keyframes keyword with the value of animation property.

Here we define the name of the animation as bounceBall.

<style>
.ball{
 animation:bounceBall;
}
@keyframes bounceBall{
	
}
</style>

Now define the animation-duration and number of iterations.

<style>
.ball{
 animation:bounceBall 8s 1;
}
@keyframes bounceBall{
	
}
</style>

8s is the duration of animation. 1 is number of iterations or cycles.

We will take the reference of the right and top sides.

We will make eight points where the position of ball changes continuously.

0% time

When the time is 0%, the ball is on the top-left corner.

<style>
0%{
 right:93%;
 top:0%; 
}
</style>

The ball is at a distance of 93% from right and 0% from top sides.

12.5% time

0%-12.5%, the ball is falling.

<style>
12.5%{
 right:93%;
 top:82%;
}
</style>
Try </>

The ball is at a distance of 93% from right and 82% from top side.

12.5% to 87.5%

<style>
25%{
 right:77.5%; /* 77.5=93-15.5   */
 top:20.5%;   /* 20.5=82-82*0.75 */
}
37.5%{
 right:62%; /*  62.5=77.5-15.5  */
 top:82%;   /* again initial value */
}
50%{
 right:46.5%; /* 46.5=62.5-15.5  */
 top:35.87%;  /* 35.87=82-82*0.75*0.75  */
}
62.5%{
 right:31%; /* 31=46.5-15.5  */
 top:82%;   /* again initial value */
}
75%{
 right:15.5%;  /* 15.5=31-15.5  */
 top:47.4%;   /*  47.4=82-82*0.75*0.75*0.75  */
}
87.5%{
 right:0%;  /* 0=15.5-15.5 */
 top:82%;  /* again  */
}
</style>
Try </>

The ball is not rotating. To make it to rotate, add the transform:rotateZ(-360deg); at 0% time.

As the time passes (8s), the ball rotates to restore its original position i.e. 0 degree.

<style>
0%{
 transform:rotateZ(-360deg);
}
</style>
Try </>

Since the movement of ball is not soft, add animation-timing-function with the alternate values of ease-in and ease-out.

ease-in value slows the movement at the start of sub-interval. ease-out value speeds up the ball at the start of sub-interval.