How to make smooth bounce animation using CSS

The smooth bouncing animation project is done with the help of HTML and CSS. This project gives so much fun and excitement to the users.

What is HTML?

The HTML or HyperText Markup Language is used to design web pages. The file extension name for HTML file is “.html”. It was discovered in 1993. An HTML file is created with the help of CSS and JavaScript. The tags use the markups of HTML. The golden rule of HTML is all the major tags must be opened with <tags> and closed with </tags>. When we have multiple tags, each tag must be closed before they are opened. 

What is CSS?

The CSS or Cascading Style Sheet is a language used to design the webpage that HTML creates. It is the core language of web designing. 

For doing this project, we have to follow some steps. These steps are as follows:

1. First, we create the animation framework.
2. Then, we specify the initial position.
3. Then, we select the bounce position.
4. Then, we determine the second bounce position.
5. Then, we continue the bouncing until it stops.

HTML code

<html>
<div id="stage"><div id="traveler"><div id="bouncer"><!-- --></div></div></div></html>

CSS code

/* keyframes definition for WebKit browsers */


@-webkit-keyframes travel {
from { left: 0;     }
to   { left: 640px; }
}


@-webkit-keyframes bounce {
from, to  {
bottom: 0;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 220px;
-webkit-animation-timing-function: ease-in;
}
}


@-webkit-keyframes spin {
from {                                     }
to   { -webkit-transform: rotateZ(360deg); }
}


/* keyframes definition for other browsers */


@keyframes travel {
from { left: 0;     }
to   { left: 640px; }
}


@keyframes bounce {
from, to  {
bottom: 0;
animation-timing-function: ease-out;
}
50% {
bottom: 220px;
animation-timing-function: ease-in;
}
}


@keyframes spin {
from {
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}


/* styles for the stage and animated elements */


#stage {
position: relative;
margin: 1em auto;
width: 660px;
height: 240px;
border: 2px solid #666;
background: #cff;
}


#traveler {
position: absolute;
width: 20px;
height: 240px;


-webkit-animation-name: travel;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration: 4.8s;


animation-name: travel;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 4.8s;
}


#bouncer {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
background: red;
background: -webkit-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
background: -moz-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
background: -o-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
background: -ms-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
background: radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;


-webkit-animation-name: bounce, spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 4.2s;


animation-name: bounce, spin;
animation-iteration-count: infinite;
animation-duration: 4.2s;
}

Output:

Supported Browsers

• Firefox
• Safari
• Google Chrome
• Opera
• Microsoft Edge