Create Bouncing Ball Animation Using HTML and CSS


 In this tutorial, We are creating Bouncing Ball animation using HTML and CSS. We are using HTML and CSS to create this bouncing ball animation. In CSS we used @keyframe animation helps us to archive this animation. @keyframe is the most amazing thing in CSS. In CSS there are thousands of properties to use in CSS to create new things. This animation is infinite and executes continually. I would like to tell you @keyframe let you improve your imagination and creativity. This tutorial is only a creative and demo tutorial. It helps to improve imagination power. Let me show you what we are creating.

Bouncing Ball Animation

In the above image, we are creating four balls. You will also see the bottom bar panel. When you create this tutorial four balls will bouncing continually on the bar. Now let me show you how to create this amazing animation.

Create Index.html file

In this file, we create four balls. We will first create a container class to centre text. In this container put another division of circle class. We insert four circle classes because we wanted to create four balls. If you wanted to add more than that then you can add more circle classes also. After the create a panel class using the division tag. This panel creates a small surface on the bottom where the ball will be bouncing. Don’t forget to link Style.css file. Make sure you specify the absolute stylesheet name. Here we specify the style.css file name for the stylesheet.

Import this code in Index.html file.

As we said, we create a container and inserted four circle classes. Then we add panel class to create the surface.

Style.css

Create the style.css file and specify this file in the head section of the index.html file. If this file is created in the root folder then just specify the name of the file otherwise if you created this file in some folder then specify your folder name and then write your file name. But we recommend creating this file in the index.html folder. Now, look at the style.css file. we will explain everything after the code.

  • In this code, we select the container class and centre all the balls.
  • Select circle class and using border-radius create the circle.
  • Select each ball using an nth-child selector and specify the different colour.
  • Then select panel class and create the surface for the balls. It is not necessary to create this panel but it creates an amazing effect.

@keyframe

Add @keyframe in the style.css file.

Add this @keyframe in the style.css file. So this will look like this.

We had called this animation using animation property.

We already specify this property in the style.css file just import the style.css file. Now you can find this property in the circle class. You can adjust the duration of the animation and also specify the flow of animation using ease and ease-in. Infinite will help animation to execute continually.

Now everything is completed. Run your index.html file you will see the bouncing ball animation.

That is all for this article. we will see you in the next article. To know more about us follow us on youtube and facebook. Thank You.