CSS Ball Bouncing Animation

Today i am going to show you about Bouncing Ball Animation using CSS3 transform and animation properties, we can do it in many ways as depends on the programmers. it is just simple trick behind this concept, let us see how we do this.

HTML

take three div's as par you need, we will change the div style to Boll and give it them to unique class and id names

<div id="boll" class="bounce"></div>

<div id="boll1" class="bounce1"></div>

<div id="boll2" class="bounce2"></div>

CSS

now apply 100% border-radius to each div and assign width,height and arrange them to different positions, now the ball design complete, it's time to animate the balls, take once class name bounce and apply -webkit-animation property and use @-webkit-keyframes property to arrange the keyframes to bounce class

Trick:

the starting ball position is 0 we are animating ball Y0 to Y200 position here we need to control the ball animation speed as par the position of ball

first step the ball drop from 200 position and it will reach to 0 position

second step the ball start form 0 position to 170 position

third step the ball drop from 170 to 0 position

like these we need to manage the ball position as par the ball animation speed

<style>
#boll{
 width:100px;
 height:100px;
 background-color:#F30;
 margin:0 auto;
 margin-top:255px;
 box-shadow:inset -10px -30px  rgba(0,0,0,.08);
 -moz-border-radius:100px;
 -webkit-border-radius:100px;
 border-radius:100%;

}

.bounce{-webkit-animation:bounce 8s ease-in-out infinite}

@-webkit-keyframes bounce {

0% {
 -webkit-transform:translateY(-200px);
}
5% {
   -webkit-transform:translateY(0px);
}
15% {
 -webkit-transform:translateY(-170px);
}
30% {  
    -webkit-transform:translateY(0px);  
} 
40% {
   -webkit-transform:translateY(-140px);
}
50% {  
    -webkit-transform:translateY(0);  
} 
60% {
 -webkit-transform:translateY(-110px);
}
70% {
 -webkit-transform:translateY(0%);
}
80% {
 -webkit-transform:translateY(-50px);
}
90% {
 -webkit-transform:translateY(0);
}

95% {
 -webkit-transform:translateY(-10px);
}

100% {
 -webkit-transform:translateY(0);
}

}


/**/


#boll1{
 width:80px;
 height:80px;
 background-color:#C3F;

 margin-top:-80px;

 box-shadow:inset -10px -30px  rgba(0,0,0,.08);
 -moz-border-radius:100px;
 -webkit-border-radius:100px;
 border-radius:100%;
}

.bounce1{-webkit-animation:bounce 5s ease-in-out infinite}

@-webkit-keyframes bounce1 {

0% {
 -webkit-transform:translateY(-200px);
}
5% {
   -webkit-transform:translateY(0px);
}
15% {
 -webkit-transform:translateY(-170px);
}
30% {  
    -webkit-transform:translateY(0px);  
} 
40% {
   -webkit-transform:translateY(-140px);
}
50% {  
    -webkit-transform:translateY(0);  
} 
60% {
 -webkit-transform:translateY(-110px);
}
70% {
 -webkit-transform:translateY(0%);
}
80% {
 -webkit-transform:translateY(-50px);
}
90% {
 -webkit-transform:translateY(0);
}

95% {
 -webkit-transform:translateY(-10px);
}

100% {
 -webkit-transform:translateY(0);
}

}


/**/


#boll2{
 width:90px;
 height:90px;
 background-color:#090;
 box-shadow:inset -10px -30px  rgba(0,0,0,.08);
 -moz-border-radius:100px;
 -webkit-border-radius:100px;
 border-radius:100%;
 margin-left:300px;
 margin-top:-90px
}

.bounce2{-webkit-animation:bounce 3s ease-in-out infinite}

@-webkit-keyframes bounce2 {

0% {
 -webkit-transform:translateY(-200px);
}
5% {
   -webkit-transform:translateY(0px);
}
15% {
 -webkit-transform:translateY(-170px);
}
30% {  
    -webkit-transform:translateY(0px);  
} 
40% {
   -webkit-transform:translateY(-140px);
}
50% {  
    -webkit-transform:translateY(0);  
} 
60% {
 -webkit-transform:translateY(-110px);
}
70% {
 -webkit-transform:translateY(0%);
}
80% {
 -webkit-transform:translateY(-50px);
}
90% {
 -webkit-transform:translateY(0);
}

95% {
 -webkit-transform:translateY(-10px);
}

100% {
 -webkit-transform:translateY(0);
}

}

</style>

Live Demo   Download Script