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:

Example

Web4 College

Try </>
  • 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.

Example

<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%.

Example

<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);.

Example

<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.

Example

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

Now define the animation-duration and number of iterations.

Example

<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.

Example

<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.

Example

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

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


Note: Remember that 93% and 82% values vary with the size of the device and the size of ball. The size of my device is 1166px by 768px. And the size of ball is 100px by 100px. These values should be adjusted in such a way that the ball can be seen on the left-bottom side corner. Then the subsequent values are calculated automatically.








How do we calculate the subsequent values?

% of time

There are total eight points 0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%.

These points are calculated by dividing the 100% (100% of time) with the 8.

12.5% = 100%/8

right property

93% is the initial value for the right property. The value of right property decreases by 15.5% at every new point.

15.5% is calculated by dividing the initial value (93) with the 6.

right=right/6.

top property

82% is the initial value for top property. After bouncing each time from the bottom (at 12.5%) side, the ball covers only 75% (0.75) of the previous value.

top = top-top*0.75

12.5% to 87.5%

Example

<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.

Example

<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.


time (%)right (%)top (%)animated-timing-function
0 930ease-in
12.59382ease-out
2577.5 = 93-1520.5 = 82-82*0.75ease-in
37.562 = 77.5-15.582ease-out
5046.5 = 62-1535.87 = 82-82*0.75*0.75ease-in
62.531 = 46.5-15.582ease-out
7515.5 = 31-15.547.4 = 82-82*0.75*0.75*0.75ease-in
87.5N/AN/AN/A
1000 = 15-1582N/A

Was this article helpful?