Double Bounce Ball Animation CSS

Double Bounce Ball Animation :

 <html>
 <head>
    <style>
           body {
              background: lightgreen;
                     }
             .bouncing {
                 width: 55px;
                 height: 55px;
                 position: relative;
                 margin: 300px auto;
                     }
             .ball-A, .ball-B {
                 width: 100%;
                 height: 100%;
                 border-radius: 50%;
                 background: blue;
                 opacity: 0.5;
                 position: absolute;
                 animation: bounce 2.0s infinite ease-in-out;
                       }
             .ball-B {
                  animation-delay: -1.0s;
                       }
  @keyframes bounce {
                       0%, 100% {
                                    transform: scale(0.0);
                                        }
                                50% {
                                    transform: scale(1.0);
                                        }}                           
   </style>
  </head>
 <body>
      <div align="middle">
               <div class="bouncing">
               <div class="ball-A"></div>
               <div class="ball-B"></div>
               </div>
      </div>
</body>
 </html>

Double Bounce Ball Animation Used as a headline: Double Bounce Ball

Update:
Washing hands with soap can reduce the risk of infection.

<html>
<head>
    <title>Double Bounce Ball</title>
   <style>
  table, td {border: 1px solid #ff12f7; border-collapse: collapse; background: #ff12f7; color: blue;}
  </style>

<style>
                 .bouncing{
                         width: 20px;
                         height: 20px;
                         position: relative;
                         margin: -5px auto; 
                          }
         .ball-A, .ball-B{
                         width: 100%;
                         height: 100%;
                         border-radius: 50%;
                         background-color: #ffffff;
                         opacity: 0.5;
                         position: absolute;
                         animation: bounce 2.0s infinite ease-in-out;
                         }
        .ball-B {animation-delay: -1.0s;}
   @keyframes bounce {
                                  0%, 100%{
                                 transform: scale(0.0);
                                    }
                             50%{
                                   transform: scale(1.0);
                                  }
    </style>
</head>
<body>
         <table align="center" width="100%">
              <tr>
                    <td>
                   <div class="bouncing" >
                  <div class="ball-A"></div>
                  <div class="ball-B"></div>
                  </div>  </td>  <td style="background: #ff12f7;  width:20%; text-align:center;"><strong>Update:</strong></td><td style="background: white;border: 2px solid #fae6ff;font-family: comic sans ms;"><marquee id='scroll 1' scrollamount="3"><div onmouseover="document.getElementById('scroll 1').stop();" onmouseout="document.getElementById('scroll 1').start()">Washing hands with soap can reduce the risk of infection.</div></div></marquee> </td>
             </tr></table>
</body>
</html>

BREAKING NEWS

Saturday, April 18, 2020

Double Bounce Ball Animation CSS

CSS for a Trapezoid/Trapezium

CSS for a Rectangle

CSS For Bold and Italic texts

Write texts on an image in html

Hover & Hover Link in HTML

CSS for an Oval Shape

No comments

Post a Comment

Pages

Instagram accessToken

BREAKING NEWS

Saturday, April 18, 2020

Double Bounce Ball Animation CSS

You Might Also Like

CSS for a Trapezoid/Trapezium

CSS for a Rectangle

CSS For Bold and Italic texts

Write texts on an image in html

Hover & Hover Link in HTML

CSS for an Oval Shape

No comments

Post a Comment

Pages

Instagram accessToken