How To Make Bounce Ball Animation in HTML & CSS | CodeProjects4u

How To Make Bounce Ball Animation in HTML & CSS

Learn how to create captivating bounce animations in HTML and CSS with this step-by-step tutorial. Engage your website visitors with animation effects and Give good experience.

Make Bounce Ball Animation

Hello Friends , If You want to make bouncing ball animation effect in you web page then this article will helps you.

Here we will provide you direct code, you can use this for your personal web page or your website.

Before copy this code you should need a Code Editor.

Best Code Editor For Programming : Click Here

1. Add HTML Code 

First we need to add some HTML code for this animation. If you know something about programming then you also know that the HTML Programming Language in First langugae that we should learn. Bcoz it's highily Recomanded for programming. We says that HTML programming language is a Base of Programming.

 

<html>

 <head>

  <title>Loading Animation</title>

 </head>

 <body>

   <div class="base">

    <div class="bat">

      <span>LOADING</span>

    </div>

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

   </div>

  </body>

</html>

Here We can use title : Loading Animation. You can change it after copy and paste in your code editor.

here also using some <div> tag for customized our animation in CSS or <style>

2. Using CSS

CSS is a desiging programming language. We can design our web page with CSS. 

 <style>

   *, *::after, *::before{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

   }

   body{

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

   }

   .base{

    height: 150px;

    width: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: scale(1.5);

   }

   .bat{

    height: 0.2em;

    width: 3em;

    background-color: brown;

    position: absolute;

    top: calc(50% + 1em);

    transform-origin: 25px -100px;

    animation: bat 3s linear infinite;

   }

   .ball{

     height: 1em;

     width: 1em;

     border: 0.15em solid brown;

     border-radius: 50%;

     position: absolute;

     top: calc(50% - 3em);

     animation: ball 3s linear infinite;

   }

   .bat span{

    font-size: 0.7em;

    position: absolute;

    top: 1px;

   }

KeyFrames For CSS

• Keyframes For Ball 

You Can Adjust this data according to yourself

   @keyframes ball {

    0%{

     transform: translate(0px);

    }

    5%{

     transform: translateX(5px) translateY(5px);

    }

    25%{

     transform: translateX(20px) translateY(45px);

    }

    45%{

     transform: translateX(5px) translateY(5px);

    }

    50%{

     transform: translate(0px);

    }

    55%{

     transform: translateX(-5px) translateY(5px);

    }

    75%{

     transform: translateX(-20px) translateY(45px);

    }

    95%{

     transform: translateX(-5px) translateY(5px);

    }

    100%{

     transform: translate(0px);

     }

   }

• Keyframes For Bat

You Can Change this data according to your Browser

   @keyframes bat {

    0%{

     transform: rotate(0deg);

    }

    25%{

     transform: rotate(-15deg);

    }

    75%{

     transform: rotate(15deg);

    }

    100%{

     transform: rotate(0deg);

    }

   }

  </style>

You can Download This Code And Use Easily

Download File